react-resize-detector
React resize detector
Last updated 20 days ago by maslianok .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-resize-detector 
SYNC missed versions from official npm registry.

Handle element resizes like it's 2020!

Live demo

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.
No window.resize listeners! No timeouts! Just a pure implementation with a lightning-fast polyfill!

Installation

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

Examples

Starting from v5.0.0 there are 2 recommended ways to work with resize-detector library:

1. HOC pattern

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

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

export default withResizeDetector(CustomComponent);

2. Child Function Pattern

import ReactResizeDetector from 'react-resize-detector';

// ...

<ReactResizeDetector handleWidth handleHeight>
  {({ width, height }) => <div>{`${width}x${height}`}</div>}
</ReactResizeDetector>;
<summary>Full example (Class Component)</summary>
import React, { Component } from 'react';
import { withResizeDetector } from 'react-resize-detector';

const containerStyles = {
  height: '100vh',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
};

class AdaptiveComponent extends Component {
  state = {
    color: 'red'
  };

  componentDidUpdate(prevProps) {
    const { width } = this.props;

    if (width !== prevProps.width) {
      this.setState({
        color: width > 500 ? 'coral' : 'aqua'
      });
    }
  }

  render() {
    const { width, height } = this.props;
    const { color } = this.state;
    return <div style={{ backgroundColor: color, ...containerStyles }}>{`${width}x${height}`}</div>;
  }
}

const AdaptiveWithDetector = withResizeDetector(AdaptiveComponent);

const App = () => {
  return (
    <div>
      <p>The rectangle changes color based on its width</p>
      <AdaptiveWithDetector />
    </div>
  );
};

export default App;
<summary>Full example (Functional Component)</summary>
import React, { useState, useEffect } from 'react';
import { withResizeDetector } from 'react-resize-detector';

const containerStyles = {
  height: '100vh',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
};

const AdaptiveComponent = ({ width, height }) => {
  const [color, setColor] = useState('red');

  useEffect(() => {
    setColor(width > 500 ? 'coral' : 'aqua');
  }, [width]);

  return <div style={{ backgroundColor: color, ...containerStyles }}>{`${width}x${height}`}</div>;
};

const AdaptiveWithDetector = withResizeDetector(AdaptiveComponent);

const App = () => {
  return (
    <div>
      <p>The rectangle changes color based on its width</p>
      <AdaptiveWithDetector />
    </div>
  );
};

export default App;

We still support other ways to work with this library, but in the future consider using the ones described above. Please let me know if the examples above don't fit your needs.

Refs

The library is trying to be smart and to not add any extra DOM elements to not break your layouts. That's why we use findDOMNode method to find and attach listeners to the existing DOM elements. Unfortunately, this method has been deprecated and throws a warning in StrictMode.

For those who wants to avoid this warning we are introducing an additional property targetRef. You have to set this prop as a ref of your target DOM element and the library will use this reference instead of serching the DOM element with help of findDOMNode

<summary>HOC pattern example</summary>
import { withResizeDetector } from 'react-resize-detector';

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

export default withResizeDetector(CustomComponent);
<summary>Child Function Pattern example</summary>
import ReactResizeDetector from 'react-resize-detector';

// ...

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

API

Prop Type Description Default
onResize Func Function that will be invoked with width and height arguments undefined
handleWidth Bool Trigger onResize on width change true
handleHeight Bool Trigger onResize on height change true
skipOnMount Bool Do not trigger onResize when a component mounts false
refreshMode String Possible values: throttle and debounce See lodash docs for more information. undefined - callback will be fired for every frame undefined
refreshRate Number Use this in conjunction with refreshMode. Important! It's a numeric prop so set it accordingly, e.g. refreshRate={500} 1000
refreshOptions Object Use this in conjunction with refreshMode. An object in shape of { leading: bool, trailing: bool }. Please refer to lodash's docs for more info undefined
targetRef Ref Use this prop to pass a reference to the element you want to attach resize handlers to. It must be an instance of React.useRef or React.createRef functions undefined

License

MIT

❤️

Show us some love and STAR ⭐ the project if you find it useful

Current Tags

  • 5.0.6                                ...           latest (20 days ago)

55 Versions

  • 5.0.6                                ...           20 days ago
  • 5.0.5                                ...           21 days ago
  • 5.0.4                                ...           21 days ago
  • 5.0.3                                ...           23 days ago
  • 5.0.2                                ...           23 days ago
  • 5.0.1                                ...           23 days ago
  • 5.0.0                                ...           23 days ago
  • 4.2.3                                ...           3 months ago
  • 4.2.2                                ...           3 months ago
  • 4.2.1                                ...           10 months ago
  • 4.2.0                                ...           a year ago
  • 4.1.4                                ...           a year ago
  • 4.1.3                                ...           a year ago
  • 4.1.2                                ...           a year ago
  • 4.1.1                                ...           a year ago
  • 4.1.0                                ...           a year ago
  • 4.0.5                                ...           a year ago
  • 4.0.4                                ...           a year ago
  • 4.0.3                                ...           a year ago
  • 4.0.2                                ...           a year ago
  • 4.0.1                                ...           a year ago
  • 4.0.0                                ...           a year ago
  • 3.4.0                                ...           2 years ago
  • 3.3.1                                ...           2 years ago
  • 3.2.1                                ...           2 years ago
  • 3.2.0                                ...           2 years ago
  • 3.1.3                                ...           2 years ago
  • 3.1.2                                ...           2 years ago
  • 3.1.1                                ...           2 years ago
  • 3.1.0                                ...           2 years ago
  • 3.0.1                                ...           2 years ago
  • 2.3.0                                ...           2 years ago
  • 2.2.0                                ...           2 years ago
  • 2.1.0                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.1.0                                ...           3 years ago
  • 0.6.0                                ...           3 years ago
  • 0.5.0                                ...           3 years ago
  • 0.4.1                                ...           3 years ago
  • 0.3.3                                ...           4 years ago
  • 0.3.2                                ...           4 years ago
  • 0.3.1                                ...           4 years ago
  • 0.3.0                                ...           4 years ago
  • 0.2.4                                ...           4 years ago
  • 0.2.3                                ...           4 years ago
  • 0.2.2                                ...           4 years ago
  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.6                                ...           5 years ago
  • 0.1.5                                ...           5 years ago
  • 0.1.4                                ...           5 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 12
This Week 1,251
This Month 2,929
Last Day 578
Last Week 2,791
Last Month 12,442
Dependencies (5)
Dependents (273)

Copyright 2014 - 2016 © taobao.org |