egauci/react-viewport

Usage

npm install --save @egauci/react-viewport

To use in a component:

import ReactViewport from '@egauci/react-viewport';

const MyComponent = () => (
  <div>
    <p>Current Viewport Values:</p>
    <ReactViewport>
      {
        viewport => (
          <div>
            Scroll: {viewport.scrollX}, {viewport.scrollY}<br />
            Dimensions: {viewport.clientWidth}, {viewport.clientHeight}
          </div>
        )
      }
    </ReactViewport>
  </div>
);

Props:

milli - optional, defaults to 100. The window resize debounce period in milliseconds

render or children - a function that receives the viewport object and returns a React element.

The viewport object has several properties, the useful ones are shown in the example above.