useBreakpoints

Tags:

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.

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[]
}