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