jontyt / react-resize-detector

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

Handle element resizes like it's 2018!

Nowadays browsers have started to support element resize handling natively using ResizeObservers. We use this feature (with a polyfill) to help you handle element resizes in React.

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

Examples

1. Callback Pattern

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'));

2. Child Function Pattern

<ReactResizeDetector handleWidth handleHeight>
  {(width, height) => <div>{`${width}x${height}`}</div>}
</ReactResizeDetector>

3. Child Component Pattern

const CustomComponent = ({ width, height }) => (
  <div>{`${width}x${height}`}</div>
);

// ...

<ReactResizeDetector handleWidth handleHeight>
  <CustomComponent />
</ReactResizeDetector>;

4. HOC pattern

import { withResizeDetector } from 'react-resize-detector';

const CustomComponent = ({ width, height }) => (
  <div>{`${width}x${height}`}</div>
);

export default withResizeDetector(CustomComponent);

5. Render prop pattern

<ResizeDetector
  handleWidth
  handleHeight
  render={({ width, height }) => (
    <div>
      Width:{width}, Height:{height}
    </div>
  )}
/>

API

Prop	Type	Description	Default
onResize	Func	Function that will be invoked with width and height arguments	n/a
handleWidth	Bool	Trigger onResize on width change	false
handleHeight	Bool	Trigger onResize on height change	false
skipOnMount	Bool	Do not trigger onResize when a component mounts	false
resizableElementId	String	Id of the element we want to observe. If none provided, parentElement of the component will be used	undefined
refreshMode	String	Possible values: throttle and debounce See lodash docs for more information. undefined - means that callback will be fired as often as ResizeObserver allows	undefined
refreshRate	Number	Only makes sense when refreshMode is set. Important! It's a numeric prop so set it accordingly, e.g. refreshRate={500}	1000

License

MIT