window-resizer

render props or hoc to get your current windows

Install

npm install --save window-resizer

or

yarn add window-resizer

Usage

HOC

import React, { Component } from "react";
import { withWindowResizer } from "window-resizer";

class App extends Component {
  render() {
    return <h1>Resizer</h1>;
  }
}

let config = {
  mobile: 450,
  desktop: 1200,
  tablet: 800
};

export default withWindowResizer(config)(App);

Context

import React, { Component } from "react";
import { WindowResizerProvider, WindowResizerConsumer } from "window-resizer";

const CONFIG = {
  mobile: 450,
  desktop: 1200,
  tablet: 800
};

class App extends Component {
  render() {
    return (
      <WindowResizerProvider breakPoint={CONFIG}>
        <div>
          <WindowResizerConsumer>
            {({width, height, screen}) => {
              <SomeUsage height={height} />
            }}
          <WindowResizerConsumer>
        </div>
      </WindowResizerProvider>
    );
  }
}

export default App

Props

type BreakPoint = {
  mobile?: number,
  tabet?: number,
  desktop?: number
};

type Screen = "MOBILE" | "TABLET" | "DESKTOP";

type Props = {
  ...BreakPoint,
  children: React$Node,
  throttle?: number
};

License

MIT © broerjuang