useBreakpointChange

Specification
Executes a given callback function whenever a breakpoint changes. Provides a breakpoint name that matches the current viewport as the first argument.
Breakpoint changes are based on useViewportChange, and are also debounced.
Definition
type useBreakpointChange = (
  callback: (breakpointName: string) => void,
  debounceDuration?: number,
)
Example
import React, { useState } from 'react'
import { useBreakpointChange } from 'atomic-layout'
​
export const Component = () => {
  const [currentBreakpoint, setCurrentBreakpoint] = useState()
​
  useBreakpointChange((breakpointName) => {
    setCurrentBreakpoint(breakpointName)
  })
  
  return <p>Current breakpoint: {currentBreakpoint}</p>
})
useViewportChange
useResponsiveValue
Last updated 1 year ago