useBreakpoints: a hook
I built my first hook a few months ago, and figured I should get it up on the blog. It's a replacement for a Higher Order Component that exists in a codebase I'm working on. That HoC passes a breakpoint to a component that dictates how the component renders across different breakpoints.
If you want to play around with the component, you can find it on Code Sandbox. I'll also briefly walk you through how it works.
The first thing
useBreakpoints does is set set the state.
useState lets you use React local state even when you're not in a class. To use it, you destructure an array, in which the first argument is whatever you want to call it, and the second lets you update the state (much like
In this hook, when a user resizes the screen, I set a new width on state with the
setWidth function inside of
useEffect lets you use something like lifecycle methods when you're not in a class. In other words,I reset the state with a new width. Then, I pass that new width to my
setBreakpoints function, which returns the correct breakpoint based on the size of the browser window.
Do you want design systems tips and tricks sent to your inbox?