React Window Decorators

This is demo for react-window-decorators. Library includes two decorators (higher order components):

• withScroll - tracks window scroll and injects scrollPositionX and scrollPositionY prop to your component.
• withWindow - tracks window dimensions (width/height), orientation, breakpoint* and isTouchDevice and injects them all as props to your component.
* breakpoint configuration must be passed to it

More detailed readme and documentation are available on GitHub.

Demo

Try scrollig or resizing your window

Breakpoints data used in this demo:

const BREAKPOINTS = [
  {
    name: 'small',
    media: '(min-width: 0)',
  },
  {
    name: 'medium',
    media: '(min-width: 600px)',
  },
  {
    name: 'large',
    media: '(min-width: 1000px)',
  },
  {
    name: 'xlarge',
    media: '(min-width: 1500px)',
  },
  {
    name: 'xxlarge',
    media: '(min-width: 2000px)',
  },
  {
    name: 'xxxlarge',
    media: '(min-width: 2800px)',
  },
];