@react-hook/resize-observer

What is @react-hook/resize-observer?

@react-hook/resize-observer is a React hook that allows you to observe changes to the size of an element. It leverages the ResizeObserver API to provide a simple and efficient way to handle resize events in your React components.

What are @react-hook/resize-observer's main functionalities?

Basic Resize Observer

This example demonstrates how to use the `useResizeObserver` hook to observe changes to the size of a `div` element. When the size changes, the new dimensions are logged to the console.

```jsx
import React, { useRef } from 'react';
import useResizeObserver from '@react-hook/resize-observer';

const ResizeComponent = () => {
  const ref = useRef(null);
  useResizeObserver(ref, (entry) => {
    console.log('Size changed:', entry.contentRect);
  });

  return <div ref={ref} style={{ width: '100%', height: '100%' }}>Resize me!</div>;
};

export default ResizeComponent;
```

Handling Resize Events

This example shows how to use the `useResizeObserver` hook to update the component's state with the new dimensions whenever the observed element is resized. The dimensions are then displayed within the `div`.

```jsx
import React, { useRef, useState } from 'react';
import useResizeObserver from '@react-hook/resize-observer';

const ResizeComponent = () => {
  const ref = useRef(null);
  const [size, setSize] = useState({ width: 0, height: 0 });

  useResizeObserver(ref, (entry) => {
    setSize({
      width: entry.contentRect.width,
      height: entry.contentRect.height
    });
  });

  return (
    <div ref={ref} style={{ width: '100%', height: '100%' }}>
      Width: {size.width}, Height: {size.height}
    </div>
  );
};

export default ResizeComponent;
```

Other packages similar to @react-hook/resize-observer

react-resize-detector

react-resize-detector is a React component that provides a way to detect element resizes. It offers a higher-level API compared to @react-hook/resize-observer and includes additional features like debounce and throttle options.

react-use-measure

react-use-measure is a React hook that combines the ResizeObserver and the IntersectionObserver APIs to provide a comprehensive solution for measuring elements. It offers more advanced features like margin and offset handling, making it more versatile than @react-hook/resize-observer.

react-resize-aware

react-resize-aware is a React hook that provides a simple way to handle resize events. It is similar to @react-hook/resize-observer but includes additional features like a built-in resize handle and support for both functional and class components.

README

useResizeObserver()

npm i @react-hook/resize-observer

A React hook that fires a callback whenever ResizeObserver detects a change to its size.

Features

• Uses a single ResizeObserver for tracking all elements used by the hooks. This approach is astoundingly more performant than using a ResizeObserver per element which most hook implementations do.
• Automatically unobserves the target element when the hook unmounts.
• You don't have to wrap your callback in useCallback() because any mutations are handled by the hook.

Quick Start

Check out an example on CodeSandbox

import * as React from 'react'
import useResizeObserver from '@react-hook/resize-observer'

const useSize = (target) => {
  const [size, setSize] = React.useState()

  React.useLayoutEffect(() => {
    setSize(target.current.getBoundingClientRect())
  }, [target])

  // Where the magic happens
  useResizeObserver(target, (entry) => setSize(entry.contentRect))
  return size
}

const App = () => {
  const target = React.useRef(null)
  const size = useSize(target)
  return (
    <pre ref={target}>
      {JSON.stringify({width: size.width, height: size.height}, null, 2)}
    </pre>
  )
}

API

useResizeObserver(target, callback, options)

function useResizeObserver<T extends Element>(
  target: React.RefObject<T> | React.ForwardedRef<T> | T | null,
  callback: UseResizeObserverCallback,
  options?: UseResizeObserverOptions
): ResizeObserver

Argument	Type	Required?	Description
target	React.RefObject | T | null	Yes	A React ref created by useRef() or an HTML element
callback	UseResizeObserverCallback	Yes	Invoked with a single ResizeObserverEntry any time the target resizes
options	UseResizeObserverOptions	No	Options for the ResizeObserver instance.

Types

UseResizeObserverCallback

export type UseResizeObserverCallback = (
  entry: ResizeObserverEntry,
  observer: ResizeObserver
) => any

UseResizeObserverOptions

export type UseResizeObserverOptions = {
  polyfill?: any
}

polyfill

A ResizeObserver polyfill implementation such as @juggle/resize-observer (this was the default in V1.x).

import useResizeObserver from '@react-hook/resize-observer'
import {ResizeObserver} from '@juggle/resize-observer'

useResizeObserver(..., ..., { polyfill: ResizeObserver })

LICENSE

MIT