Package Exports

use-resize-observer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-resize-observer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

License

MIT