#Window Info API

#<WindowInfoProvider>

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>
);

#Props

breakpoints*
  :  object
  |  required

An object of named css-queries.

children*
  :  React.ReactNode
  |  required

React children.

#Context

width
  :  number

Window width, in pixels

height
  :  number

Window height, in pixels

--vw
  :  number

CSS variable representing the viewport width

--vh
  :  number

CSS variable representing the viewport height

breakpoints
  :  object

The results of your breakpoints

eventsFired
  :  number

Number of animation frames completed

#useWindowInfo

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 (
    ...
  )
};

#withWindowInfo

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 (
    ...
  )
};

#TypeScript

All types can be directly imported.

import {
  IWindowInfoContext,
  Breakpoints,
  WindowInfoProviderProps,
  WindowInfoProps
} from '@faceless-ui/window-info/dist/types';