useMediaQuery
Use case
When you need to do logic based on the size of the viewport, such as determining whether to use a mobile layout or full screen layout. It uses the matchMedia API, taking a value and returning a boolean for whether the viewport size is less than or equal to that value.
How to install
npm install @bedrock-layout/use-media-query
Basic usage
import useMediaQuery from '@bedrock-layout/use-media-query';const App = () => {const smallScreen = useMediaQuery("(max-width:640px)")return (<div ref={setRef} {...props}>{smallScreen ? <MobileNav /> : <FullScreenNav />}</div>)}
Storybook
Checkout storybook for more details.