The react-resize-detector is a React component designed to handle resize events for React elements. It provides a simple and efficient way to trigger a function or render logic when the size of an element changes. This is particularly useful in responsive designs and when elements need to adjust based on their container's dimensions.

What are react-resize-detector's main functionalities?

Basic resize detection

This feature allows you to detect the size of a component and react to changes. The `useResizeDetector` hook provides `width`, `height`, and `ref` which you attach to the component you want to monitor. The component re-renders whenever the size changes, displaying the new dimensions.

import React from 'react';
import useResizeDetector from 'react-resize-detector';

const ResponsiveComponent = () => {
  const { width, height, ref } = useResizeDetector();
  return (
    <div ref={ref}>
      Size: {width} x {height}
    </div>
  );
};

export default ResponsiveComponent;

OnResize callback

This feature uses the `withResizeDetector` higher-order component to monitor size changes. It provides `width`, `height`, and an `onResize` callback that is triggered on every resize event. This is useful for performing actions or calculations based on the new size.

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

class MyComponent extends React.Component {
  render() {
    const { width, height, onResize } = this.props;
    return (
      <div onResize={onResize}>
        Current size: {width} x {height}
      </div>
    );
  }
}

export default withResizeDetector(MyComponent, {
  handleWidth: true,
  handleHeight: true,
  onResize: (width, height) => console.log(`Resized to ${width} x ${height}`)
});

Other packages similar to react-resize-detector

Readme

Source

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

Keywords

FAQs

What is react-resize-detector?

Is react-resize-detector well maintained?

Last updated on 04 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-resize-detector