import react from 'react'; import WindowInfoProvider from '@faceless-ui/window-info'; export const MyApp = () = ( <WindowInfoProvider breakpoints={{ s: '(max-width: 768px)', m: '(max-width: 1024px)', l: '(max-width: 1680px)', xl: '(max-width: 1920px)', }} > ... </WindowInfoProvider> );
breakpoints*
An object of named css-queries.
children*
React children.
width
Window width, in pixels
height
Window height, in pixels
--vw
CSS variable representing the viewport width
--vh
CSS variable representing the viewport height
breakpoints
The results of your breakpoints
eventsFired
Number of animation frames completed
This is a hook you can use to access the context.
import react from 'react'; import { useWindowInfo } from '@faceless-ui/window-info; export const MyComponent = () => { const windowInfo = useWindowInfo(); return ( ... ) };
This is a higher-order component you can use to access the context.
import react from 'react'; import { withWindowInfo } from '@faceless-ui/window-info; export const MyComponent = withWindowInfo((props) => { const { windowInfo } = props; return ( ... ) };
All types can be directly imported.
import { IWindowInfoContext, Breakpoints, WindowInfoProviderProps, WindowInfoProps } from '@faceless-ui/window-info/dist/types';