react-element-resize

Element resize sensor with optional debounce

Installation

NPM

npm install --save react react-element-resize

Don't forget to manually install peer dependencies (react) if you use npm@3.

1998 Script Tag:

<script src="https://unpkg.com/react/dist/react.min.js"></script>
<script src="https://unpkg.com/react-element-resize/build/react-element-resize.min.js"></script>
(Module exposed as `ReactElementResize`)

Demo

http://nkbt.github.io/react-element-resize

Codepen demo

https://codepen.io/nkbt/pen/RVYWQm

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {ReactElementResize} from 'react-element-resize';


const onResize = ({width, height}) =>
  console.log({width, height});


const onScroll = ({offsetLeft, offsetTop, scrollLeft, scrollTop}) =>
  console.log({offsetLeft, offsetTop, scrollLeft, scrollTop});


const App = () => (
  <ReactElementResize debounceTimeout={200} onResize={onResize} onScroll={onScroll}>
    {data => <pre>{JSON.stringify(data, null, 2)}</pre>}
  </ReactElementResize>
);

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

Options

// TODO

License

MIT