use-breakpoints-width
A React hook for getting the current breakpoint name and screen width.
Usage
Initialize use-breakpoints-width
with a configuration object. The return value will be an object with the breakpoint's name (string) and screen width (number).
; { const breakpoint width = ; return <div> `Breakpoint name is . Screen width is px` </div> ;}
Default settings will apply in case you will provide no configuration
breakpoints: desktop: 992 tablet: 768 mobile: 0 debounceDelay: 250
Settings
Breakpoints
You can configure custom breakpoints by providing an object as the parameter.
const breakpoint = ;
More examples for breakpoint names.
const breakpoint = ;
const breakpoint = ;
Debounce delay time
This custom hook uses debounce due to optimization purposes. You can change the delay time to meet your requirements. Provide a new value as the debounceDelay
property value. Number in milliseconds (default 250ms).
...const breakpoint width = ;
It's possible to left it undefined so default value will apply (default 250ms).
...const breakpoint width = ; // debounceDelay is 250 ms now