Skip to content
A Cross-Browser, Event-based, Element Resize Detection for React
JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 835b90e Apr 15, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Upgrade libraries Apr 15, 2020
lib Upgrade libraries Apr 15, 2020
src Upgrade libraries Sep 18, 2019
.babelrc Update peerDependencies versions Jun 7, 2019
.eslintignore Code refactoring Mar 13, 2016
.eslintrc Upgrade libraries Sep 18, 2019
.gitignore Config eslint, babel and package info Feb 27, 2019
.npmignore Remove some development files from NPM package Apr 7, 2020
.travis.yml Update travis config Feb 27, 2019
LICENSE Use ResizeObserver to handle resize changes Feb 25, 2018
README.md Update README.md Jan 21, 2020
package.json 4.2.3 Apr 15, 2020
yarn.lock Upgrade libraries Apr 15, 2020

README.md

Handle element resizes like it's 2020!

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. 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>;

3. Callback Pattern

import ReactResizeDetector from 'react-resize-detector';

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

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

4. Child Component Pattern

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

// ...

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

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 undefined
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
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
querySelector String A selector of an element to observe. You can use this property to attach resize-observer to any DOM element. Please refer to the querySelector docs undefined
targetDomEl DOM element A DOM element to observe. By default it's a parent element in relation to the ReactResizeDetector component. But you can pass any DOM element to observe. This property is omitted when you pass querySelector undefined
nodeType node Valid only for a callback-pattern. Ignored for other render types. Set resize-detector's node type. You can pass any valid React node: string with node's name or element. Can be useful when you need to handle table's or paragraph's resizes div

License

MIT

You can’t perform that action at this time.