Logo
v1.0.0
DEMO
Try resizing the window to observe change
Size greater than "md" -false
Size greater than "md" (non reactive) -false
Size between "md" and "lg"-false

BreakPointHooks

Reactive hooks and utilities to be used with user provided breakpoints. Number values are treated as pixel widths. String values are passed through unchanged, so values like 48rem or 1024px can be used directly.

Functions

Reactive hooks

  • useGreater
  • useSmaller
  • useBetween

Non reactive utility function

  • isGreater
  • isSmaller
  • isInBetween

Usage

import { BreakPointHooks, breakpointsTailwind } from '@react-hooks-library/core'

const { useGreater, useBetween, isSmaller } =
  BreakPointHooks(breakpointsTailwind)

// Non reactive check, can be used outside react components
const smaller = isSmaller('xl')

function Demo() {
  // Greater than md
  const greater = useGreater('md')

  // Betweeb md and lg
  const between = useBetween('md', 'lg')

  // smaller than 2xl
  const smaller = useSmaller('2xl')
}

return (
  <div>
    {greater && 'Greater than md'}
    {between && 'Between md & lg'}
    {smaller && 'Smaller than 2xl'}
  </div>
)

import { BreakPointHooks } from '@react-hooks-library/core'

const breakpoints = {
  mobile: 425,
  tablet: 768,
  laptop: 1024,
  desktop: 1560
}

const { useGreater, useBetween } = BreakPointHooks(breakpoints)

function Demo() {
  // Greater than mobile
  const greater = useGreater('mobile')

  // Betweeb laptop and desktop
  const between = useBetween('laptop', 'desktop')

  // smaller than tablet
  const smaller = useSmaller('tablet')
}

import { BreakPointHooks } from '@react-hooks-library/core'

const breakpoints = {
  sm: '40rem',
  md: '48rem',
  lg: '64rem',
  xl: '80rem',
  '2xl': '96rem'
}

const { useGreater } = BreakPointHooks(breakpoints)

function Demo() {
  const greater = useGreater('md')
}

Performance Optimization

If you use the these BreakPointHooks a lot in your application, you run the risk of unnecessary performance loss by adding too many event listeners. A way to optimise is to setup all of these hooks in a context provider and consume them with React.useContext(), thus you only setup media query event listeners only once.

React.useContext causes re-renders in all components that consume that context, whether the consumed value is used or not, So you can further further optimise these contexts by using either use-context-selector or react-tracked.

Available Breakpoints

/**
 * Breakpoints from Tailwind V2
 *
 * @see https://tailwindcss.com/docs/breakpoints
 */
export const breakpointsTailwind = {
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1536
}

/**
 * Breakpoints from Bootstrap V5
 *
 * @see https://getbootstrap.com/docs/5.0/layout/breakpoints
 */
export const breakpointsBootstrapV5 = {
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1400
}

/**
 * Breakpoints from Vuetify V2
 *
 * @see https://vuetifyjs.com/en/features/breakpoints
 */
export const breakpointsVuetify = {
  xs: 600,
  sm: 960,
  md: 1264,
  lg: 1904
}

/**
 * Breakpoints from Ant Design
 *
 * @see https://ant.design/components/layout/#breakpoint-width
 */
export const breakpointsAntDesign = {
  xs: 480,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1600
}

/**
 * Sematic Breakpoints
 */
export const breakpointsSematic = {
  mobileS: 320,
  mobileM: 375,
  mobileL: 425,
  tablet: 768,
  laptop: 1024,
  laptopL: 1440,
  desktop4K: 2560
}

Type Declarations

/**
 * Reactive hooks and utilities to be used with user provided breakpoints.
 *
 * @param {string} breakpoints
 * @returns functions to be used as hooks
 *
 * @see https://react-hooks-library.vercel.app/core/BreakPointHooks
 */
declare function BreakPointHooks<
  BreakPoints extends Record<string, number | string>
>(
  breakpoints: BreakPoints
): {
  /**
   * Hook that returns a boolean if screen width is greater than given breakpoint.
   *
   * @param k {string} breakpoint
   * @returns boolean
   *
   * @see https://react-hooks-library.vercel.app/core/BreakPointHooks
   **/
  useGreater: (k: keyof BreakPoints) => boolean
  /**
   * Hook that returns a boolean if screen width is smaller than given breakpoint.
   *
   * @param k {string} breakpoint
   * @param k {string} breakpoint
   *
   * @returns boolean
   *
   * @see https://react-hooks-library.vercel.app/core/BreakPointHooks
   **/
  useSmaller: (k: keyof BreakPoints) => boolean
  /**
   * Hook that returns a boolean if screen width is between two given breakpoint.
   *
   * @param a {string} breakpoint
   * @param b {string} breakpoint
   *
   * @returns boolean
   *
   * @see https://react-hooks-library.vercel.app/core/BreakPointHooks
   **/
  useBetween: (a: keyof BreakPoints, b: keyof BreakPoints) => boolean
  /**
   * Utility function that returns a boolean if screen width is greater than given breakpoint.
   *
   * @param k {string} breakpoint
   *
   * @see https://react-hooks-library.vercel.app/core/BreakPointHooks
   **/
  isGreater(k: keyof BreakPoints): boolean
  /**
   * Utility function that returns a boolean if screen width is smaller than given breakpoint.
   *
   * @param k {string} breakpoint
   *
   * @see https://react-hooks-library.vercel.app/core/BreakPointHooks
   **/
  isSmaller(k: keyof BreakPoints): boolean
  /**
   * Utility function that returns a boolean if screen width is between two given breakpoint.
   *
   * @param k {string} breakpoint
   *
   * @see https://react-hooks-library.vercel.app/core/BreakPointHooks
   **/
  isInBetween(a: keyof BreakPoints, b: keyof BreakPoints): boolean
}
declare type BreakPointHooksReturn = ReturnType<typeof BreakPointHooks>

Source

Source | Demo | Docs