BreakPointHooks#

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')
}

/**
 * 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
}

declare type BreakPoints = Record<string, number>
/**
 * 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: 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: string) => 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: string) => 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: string, b: string) => 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: string): 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: string): 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: string, b: string): boolean
}

declare type BreakPointHooksReturn = ReturnType<typeof BreakPointHooks>