@rescui/use-resize-observer

ResizeObserver hook

This package is used for observing react elements. It uses ResizeObserver and alleviates some of its bugs.

It's best used together with React refs. It can be used with raw HTML elements, although it's better to avoid that.

Usage examples

React ref example

import React, { useRef } from 'react';
import { useResizeObserver } from '@rescui/use-resize-observer';

const MyComponent = () => {
  const ref = useRef<HTMLElement>(null);
  useResizeObserver(ref, (entry: ResizeObserverEntry) => {
    // resize logic
  });

  return <div ref={ref}>To the moon!</div>;
};

HTML element example

Note: Avoid this option when possible due to additional re-renders when using callback refs and useState. Use React ref instead.

import React, { useState } from 'react';
import { useResizeObserver } from '@rescui/use-resize-observer';

const MyComponent = () => {
  const [el, setEl] = useState<HTMLElement>(null);
  useResizeObserver(el, (entry: ResizeObserverEntry) => {
    // resize logic
  });

  return <div ref={setEl}>To the moon!</div>;
};

Ignore first call

Sometimes you need to observe only changes and ignore the first observer call.

In that case, you may use the ignoreFirstCall option:

import React, { useState } from 'react';
import { useResizeObserver } from '@rescui/use-resize-observer';

const MyComponent = () => {
  const ref = useRef<HTMLElement>(null);
  useResizeObserver(
    ref,
    (entry: ResizeObserverEntry) => {
      // resize logic
    },
    { ignoreFirstCall: true }
  );

  return <div ref={ref}>To the moon!</div>;
};