RE

Resize Observer

@react-hook/resize-observer

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

Hooks
react
react hook
resize observer
resize observer hook
resize observer react hook
use-resize-observer
useresizeobserver
resize hook
size hook
@react-hook/resize-observer
Stars
1.5k
Weekly
401k
Open issues
38
Bundle
~40 kB

Installation

npm install @react-hook/resize-observer

Code example

import { useResizeObserver } from "@react-hook/resize-observer";

export function Example() {
  const value = useResizeObserver();
  return <p>{String(value)}</p>;
}

Pros & cons

Pros

  • Actively maintained by Jared Lunde
  • 401k weekly downloads. Battle tested
  • First-class TypeScript definitions
  • MIT licensed

Considerations

  • Adds roughly ~40 kB to your bundle
  • Needs client-only rendering in SSR frameworks
  • Not supported in React Native
  • 38 open issues on GitHub

FAQs

Alternatives & similar libraries