Guide
Reference
Roadmap
Guide
Reference
Roadmap

useBreakpoints

Tags:
Browser

A React Hook that provides a simple API to interact with the viewport breakpoints.

Demo

Resize the window to see the effect.

Source
Match 'md':
false
IsGreaterOrEqual('lg'):
false
IsInBetween('md', 'xl') :
false
Max matched:
undefined
Currents matched:
[]

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const bps = useBreakpoints(breakpoints, options)

Breakpoints

/** * A object that contains different breakpoints */ export type Breakpoints<K extends string = string> = Record<K, number | string>

Options

export interface UseBreakpointsOptions { /** * The query strategy to use for the generated shortcut methods like `.lg` * * 'min-width' - .lg will be true when the viewport is greater than or equal to the lg breakpoint (mobile-first) * 'max-width' - .lg will be true when the viewport is smaller than the xl breakpoint (desktop-first) * * @defaultValue "min-width" */ strategy?: 'min-width' | 'max-width' }

Returns

export type UseBreakpointsReturns<K extends string> = Record<K, boolean> & { /** * The current breakpoints states */ breakpoints: Record<K, boolean> /** * Check if the viewport is greater than the given breakpoint * * @param {K} k - `K`, the breakpoint key * @returns {boolean} `boolean`, whether the viewport is greater than the given breakpoint */ isGreater: (k: K) => boolean /** * Check if the viewport is greater or equal to the given breakpoint * * @param {K} k - `K`, the breakpoint key * @returns {boolean} `boolean`, whether the viewport is greater or equal to the given breakpoint */ isGreaterOrEqual: (k: K) => boolean /** * Check if the viewport is smaller than the given breakpoint * * @param {K} k - `K`, the breakpoint key * @returns {boolean} `boolean`, whether the viewport is smaller than the given breakpoint */ isSmaller: (k: K) => boolean /** * Check if the viewport is smaller or equal to the given breakpoint * * @param {K} k - `K`, the breakpoint key * @returns {boolean} `boolean`, whether the viewport is smaller or equal to the given breakpoint */ isSmallerOrEqual: (k: K) => boolean /** * Check if the viewport is between the given breakpoints * * @param {K} a - `K`, the breakpoint key * @param {K} b - `K`, the breakpoint key * @returns {boolean} `boolean`, whether the viewport is between the given breakpoints */ isInBetween: (a: K, b: K) => boolean /** * The current matched breakpoints */ currents: K[] }