yarn add @faceless-ui/window-info
First, wrap your app with the provider. This component does not render anything in the DOM, and should be placed nearest to the top of your app as possible to provide context to any components that need it. This is also where your breakpoints get defined.
import { WindowInfoProvider } from '@faceless-ui/window-info'; export const App = () => { return ( <WindowInfoProvider breakpoints={{ s: '(max-width: 768px)', m: '(max-width: 1024px)', l: '(max-width: 1680px)', xl: '(max-width: 1920px)', }} > ... </WindowInfoProvider> ) }
Then consume the context however needed, most commonly with the useWindowInfo
hook.
import { useWindowInfo } from '@faceless-ui/window-info'; export const MyComponent = (props) => { const windowInfo = useWindowInfo(); return ( ... ); }
For more advanced setups, see the full API reference.