Add "useBreakpoint" hook
See original GitHub issueThis is an API refinement story preparation for the first major release. It introduces a breaking change and will be released respectively.
What:
I suggest to add the following React hook:
type UseBreakpoint<T> = ((breakpointName: string) => T) => [string, T]
Why:
It should replace current useBreakpointChange
hook with both:
- Information about the current breakpoint (first argument in a tuple),
- Updater function that is called on each breakpoint change (mirroring of
useBreakpointChange
. useBreakpoint
will be called on initial render, whenuseBreakpointChange
is not.
Main motivation is that it’s currently lengthy to know which breakpoint is met. It requires to have useState
updating its value on useBreakpointChange
callback. With the suggested hook added it can be written in a single hook declaration.
Usage example:
Getting a breakpoint name
import { useBreakpoint } from 'atomic-layout'
const Component = () => {
const [breakpointName] = useBreakpoint()
return <p>You are on {breakpointName} screen</p>
}
Reacting to breakpoint change
import { useBreakpoint } from 'atomic-layout'
const dataMap = {
xs: 'one',
sm: 'two'
}
const Component = () => {
const [breakpointName, data] = useBreakpoint((breakpointName) => {
return dataMap[breakpointName]
})
return <p>You are on {breakpointName} screen with {data}</p>
}
How:
- Deprecate
useBreakpointChange
- Add
useBreakpoint
- Add unit tests
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
How to Create a useBreakpoint Hook in React - Webtips
To create a custom useBreakpoint hook in React, import useState and useEffect, and add a resize event to the window inside the useEffect......
Read more >useBreakpoint - React Hook - DEV Community
I have come across a use case where I had to display content based on the device width. I was using Material-UI's Grid...
Read more >iiroj/use-breakpoint: A React hook for getting the ... - GitHub
For a list of breakpoints, we generate some css media queries in the form of (min-width: XXXpx) and (max-width: YYYpx) and then add...
Read more >useBreakpoint Hook — Get Media Query Breakpoints in React
To accomplish that in React, we will create one custom Hook, useBreakpoint , which will give us xs , sm , md ,...
Read more >use-breakpoint - npm
A React hook for getting the current responsive media breakpoint. Latest version: 3.0.6, last published: 16 days ago.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@vitordino, you have a point. While reading your reply I’ve also realized that
useCurrentBreakpoints
has a slightly different behavior thanuseResponsiveQuery
. I’ll elaborate below.useResponsiveQuery
Designed to determine a viewport match against a breakpoint, or a range of breakpoints. More precisely, a range of breakpoints of the same nature (i.e. dimensional, orientational, or pixel density breakpoints). With this hook you cannot, say, get the match in case you would like to know if it’s a medium breakpoint or a retina display. You would have to use such hook twice:
useCurrentBreakpoints
This hook, on the other hand, returns the list of all breakpoints that match the current viewport. Breakpoints in the list may be of a different nature.
Taking the same md/retina example above, you could get the match information in a single
useCurrentBreakpoints
hook call:Conclusion
I believe that both hook have a place to be. I’d love for the users to give them a try and see what are the use cases for both. I’ve prepared the implementation for
useCurrentBreakpoints
in #318, and will continue on it, since my original question was answered.yep, you caught one idea of using an array on
useBreakpoints
… i think it’s just a different way to express it, and maybe use it…i’m not agains the
from/to
(orbelow/above
) approaches, i even think that probably it’s more powerful too, but i believe both API’s can live simultaneously…just some other ways to let users of the lib explore the api (some will prefer only using one of it, but maybe there are best uses for both) 🤷