use-resize-observer

What is use-resize-observer?

The use-resize-observer package provides a React hook that allows you to monitor an element for size changes. It is useful for responsive design and element-specific adjustments based on width and height. It leverages the ResizeObserver API to offer a simple and efficient way to react to size changes in components.

What are use-resize-observer's main functionalities?

Basic usage for monitoring size changes

This code demonstrates how to use the use-resize-observer hook to monitor the size of a component. By destructuring `ref`, `width`, and `height` from the hook, you can easily track the dimensions of the element that the `ref` is attached to.

import useResizeObserver from 'use-resize-observer';

const MyComponent = () => {
  const { ref, width, height } = useResizeObserver();

  return (
    <div ref={ref}>
      The width is {width} and the height is {height}.
    </div>
  );
};

Using with a callback

This example shows how to use the hook with a callback function. The `onResize` option allows you to provide a function that will be called whenever the observed element's size changes, receiving the new `width` and `height` as parameters.

import useResizeObserver from 'use-resize-observer';

const MyComponent = () => {
  const { ref } = useResizeObserver({
    onResize: ({ width, height }) => {
      console.log(`New size: ${width}x${height}`);
    }
  });

  return <div ref={ref}>Resize me and check the console!</div>;
};

Other packages similar to use-resize-observer

react-resize-detector

react-resize-detector is another package that provides components and hooks to listen to resize events. Compared to use-resize-observer, it offers more customization options, such as the ability to choose between a hook or a higher-order component for detecting resize events. However, use-resize-observer might be simpler to use for straightforward use cases.

resize-observer-polyfill

resize-observer-polyfill is not a React-specific package but a polyfill for the ResizeObserver API. It can be used in conjunction with React but requires manual setup and teardown of the observer. use-resize-observer abstracts this setup, offering a more integrated React hook approach.

README

use-resize-observer

A React hook that allows you to use a ResizeObserver to measure an element's size.

Install

yarn add use-resize-observer
# or
npm install --save use-resize-observer

Usage

import React from "react";
import useResizeObserver from "use-resize-observer";

const App = () => {
  const [ref, width, height] = useResizeObserver();

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

Notes

• Uses resize-observer-polyfill internally, which falls back to the native ResizeObserver, if available.

Related

• @zeecoder/react-resize-observer
• @zeecoder/container-query

License

MIT