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.
type useBreakpointChange = (callback: (breakpointName: string) => void,debounceDuration?: number,)
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>})