React Resize Detector

A Cross-Browser, Event-based, Element Resize Detection for React
Alternatives To React Resize Detector
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Resize Detector1,0993,6403676 days ago96June 15, 20222mitTypeScript
A Cross-Browser, Event-based, Element Resize Detection for React
Resize Observer87028180a month ago62August 01, 202110apache-2.0TypeScript
Polyfills the ResizeObserver API.
React Resize Aware48041647 months ago40February 08, 20222mitJavaScript
⇲👁 A simple React Hook which allows to listen the resize event of any target element when it changes sizes
React Viewport Utils16
a year ago9mitTypeScript
Utility components for working with the viewport in react
React Resize Context13
2 years ago15March 22, 20194mitTypeScript
⚡️A high performance React component for responding to resize event
React Window Resize Listener7
5 years agoJavaScript
This React component can be used to execute some tasks when the window resize event is triggered.
Alternatives To React Resize Detector
Select To Compare


Alternative Project Comparisons
Readme

Handle element resizes like it's 2023!

Live demo

Nowadays browsers support element resize handling natively using ResizeObservers. The library uses these observers to help you handle element resizes in React.

🐥 Tiny ~3kb

🐼 Written in TypeScript

🦁 Supports Function and Class Components

🐠 Used by 90k repositories

🦄 Generating 70M+ downloads/year

No window.resize listeners! No timeouts! No 👑 viruses! :)

TypeScript-lovers notice: starting from v6.0.0 you may safely remove @types/react-resize-detector from you deps list.

Do you really need this library?

Container queries now work in all major browsers. It's very likely you can resolve your problem using pure CSS.

Example
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>
.post {
  container-type: inline-size;
}

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Installation

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

and

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

Examples

1. React hook

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

const CustomComponent = () => {
  const { width, height, ref } = useResizeDetector();
  return <div ref={ref}>{`${width}x${height}`}</div>;
};
With props
import { useResizeDetector } from 'react-resize-detector';

const CustomComponent = () => {
  const onResize = useCallback(() => {
    // on resize logic
  }, []);

  const { width, height, ref } = useResizeDetector({
    handleHeight: false,
    refreshMode: 'debounce',
    refreshRate: 1000,
    onResize
  });

  return <div ref={ref}>{`${width}x${height}`}</div>;
};
With custom ref. _not recommended, may have some unexpected behaviour if you dynamically mount/unmount the observed element_
import { useResizeDetector } from 'react-resize-detector';

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

2. HOC pattern

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

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

export default withResizeDetector(CustomComponent);

3. Child Function Pattern

import ReactResizeDetector from 'react-resize-detector';

// ...

<ReactResizeDetector handleWidth handleHeight>
  {({ width, height }) => <div>{`${width}x${height}`}</div>}
</ReactResizeDetector>;
Full example (Class Component)
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;
Full example (Functional Component)
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 below explanation doesn't apply to useResizeDetector

The library is trying to be smart and does 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 want 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 searching the DOM element with help of findDOMNode

HOC pattern example
import { withResizeDetector } from 'react-resize-detector';

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

export default withResizeDetector(CustomComponent);
Child Function Pattern example
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
observerOptions Object These options will be used as a second parameter of resizeObserver.observe method. 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

Testing with Enzyme and Jest

Thanks to @Primajin for posting this snippet

const { ResizeObserver } = window;

beforeEach(() => {
  delete window.ResizeObserver;
  window.ResizeObserver = jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn()
  }));

  wrapper = mount(<MyComponent />);
});

afterEach(() => {
  window.ResizeObserver = ResizeObserver;
  jest.restoreAllMocks();
});

it('should do my test', () => {
  // [...]
});

License

MIT

❤️

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

Popular Reactjs Projects
Popular Resize Events Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Typescript
Reactjs
Dom
Lodash
Cross Browser
Resize Events