Package Exports

react-resize-detector

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-resize-detector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Examples

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

chidlren function 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>
          {(width, height) => <div>{`${width}x${height}`}</div>}
        </ReactResizeDetector>
      </div>
    );
  }
}

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

chidlren component pattern

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

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

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

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

it's also possible to have everything toghether! ;)

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

const CustomComponent = ({ 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>)}
          <CustomComponent />
        </ReactResizeDetector>
      </div>
    );
  }

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

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

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 no one 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	Makes sense only when `refreshMode` is set. Important! It's numeric prop so set it correctly, e.g. `refreshRate={500}`	`1000`

License

MIT