#Window Info Setup

#Installation

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.