use-resize-observer

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

In Action

CodeSandbox Demo

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>
  );
};

SSR, Default Size

You can set the default size, which is useful for SSR.

const [ref, width, height] = useResizeObserver({
  defaultWidth: 100,
  defaultHeight: 50
});

// width / height will be 100 and 50 respectively, until the ResizeObserver
// kicks in and reports the actual size.

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