#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

An object of named css-queries.

React children.

#Context

Window width, in pixels

Window height, in pixels

CSS variable representing the viewport width

CSS variable representing the viewport height

The results of your breakpoints

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