https://github.com/halo-lab/use-breakpoints-width
React hook that shows the current breakpoint name and screen width.
https://github.com/halo-lab/use-breakpoints-width
hooks react reactjs responsive
Last synced: about 1 year ago
JSON representation
React hook that shows the current breakpoint name and screen width.
- Host: GitHub
- URL: https://github.com/halo-lab/use-breakpoints-width
- Owner: Halo-Lab
- Created: 2020-07-30T10:35:13.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-01-18T07:43:50.000Z (over 4 years ago)
- Last Synced: 2025-04-09T22:07:12.100Z (about 1 year ago)
- Topics: hooks, react, reactjs, responsive
- Language: JavaScript
- Homepage:
- Size: 41 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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).
```js
import useBreakpoints from 'use-breakpoints-width';
export default function App() {
const { breakpoint, width } = useBreakpoints({
breakpoints: {
desktop: 1200,
tablet: 768,
mobile: 0
},
debounceDelay: 250
});
return (
{`Breakpoint name is ${breakpoint}. Screen width is ${width}px`}
);
}
```
> Default settings will apply in case you will provide no configuration
```js
{
breakpoints: {
desktop: 992,
tablet: 768,
mobile: 0
},
debounceDelay: 250
}
```
## Settings
### Breakpoints
You can configure custom breakpoints by providing an object as the parameter.
```js
const { breakpoint } = useBreakpoints({
breakpoints: {
desktop: 1200,
tablet: 768,
mobile: 0
}
});
```
More examples for breakpoint names.
```js
const { breakpoint } = useBreakpoints({
breakpoints: {
xxlarge: 1440,
xlarge: 1200,
large: 1024,
medium: 640,
small: 0,
}
});
```
```js
const { breakpoint } = useBreakpoints({
breakpoints: {
'big-screen': 1440,
'small screen': 768,
'mobile_screen': 640,
}
});
```
### 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**).
```js
...
const { breakpoint, width } = useBreakpoints({
breakpoints: {
desktop: 1200,
tablet: 768,
mobile: 0
},
debounceDelay: 500
});
```
It's possible to left it undefined so default value will apply (**default 250ms**).
```js
...
const { breakpoint, width } = useBreakpoints({
breakpoints: {
desktop: 1200,
tablet: 768,
mobile: 0
}
}); // debounceDelay is 250 ms now
```
## Word from author
Have fun! ✌️
