warmleaf/react-resize-detector

A Cross-Browser, Event-based, Element Resize Detection for React

Handle element resizes like it's 2018!

Nowadays browsers start supporting element resize handling natively using ResizeObserver. And we use this feature (with polyfill) to help you handle element resizes in React.

⚠️ This change intriduced in v.2.0.0

For older implementations please checkout this branch v.1.1.0

Demo

Live demo

Local demo:

git clone https://github.com/maslianok/react-resize-detector.git
cd react-resize-detector/examples
npm i && npm start

Installation

npm i react-resize-detector
// OR
yarn add react-resize-detector

Example

callback

import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import ReactResizeDetector from 'react-resize-detector';

class App extends PureComponent {
  render() {
    return (
      <div>
        ...
        <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
      </div>
    );
  }

  onResize = () => {
    ...
  }
}

render(<App />, document.getElementById('root'));

render chidlren function

import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import ReactResizeDetector from 'react-resize-detector';

class App extends PureComponent {
  render() {
    return (
      <div>
        ...
        <ReactResizeDetector handleWidth handleHeight>
          {(width, height) => (<div>{width}x{height}</div>)}
        </ReactResizeDetector>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

render chidlren react element

import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import ReactResizeDetector from 'react-resize-detector';

const ChildrenComponent = ({ width, height }) => (<div>{width}x{height}</div>);

class App extends PureComponent {
  render() {
    return (
      <div>
        ...
        <ReactResizeDetector handleWidth handleHeight>
          <ChildrenComponent />
        </ReactResizeDetector>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

custom

import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import ReactResizeDetector from 'react-resize-detector';

const ChildrenComponent = ({ width, height }) => (<div>{width}x{height}</div>);

class App extends PureComponent {
  render() {
    return (
      <div>
        ...
        <ReactResizeDetector handleWidth handleHeight onResize={this.onResize}>
          {(width, height) => (<div>{width}x{height}</div>)}
          <ChildrenComponent />
        </ReactResizeDetector>
      </div>
    );
  }

  onResize = () => {
    ...
  }
}

render(<App />, document.getElementById('root'));

Note: You can use multiple render methods for one call. When using render children, in mount children component will not received width and height value because window not resized, you should add a default value.

API

onResize

(Func) Function that will be invoked with width and height arguments.

handleWidth

(Bool) Trigger onResize on width change. Default: false.

handleHeight

(Bool) Trigger onResize on height change. Default: false.

skipOnMount

(Bool) Do not trigger onResize when a component mounts. Default: false.

resizableElementId

(String) Id of the element we want to observe. If no one provided, parentElement of the component will be used. Default: ``.

refreshMode

(String) Possible values: throttle and debounce See lodash docs for more information. Default: undefined - means that callback will be fired as often as ResizeObserver allows

refreshRate

(Number) Makes sense only when refreshMode is set. Default: 1000. Important! It's numeric prop so set it correctly, e.g. refreshRate={500}

License

MIT