npmpackage.info

Gathering detailed insights and metrics for @react-hook/resize-observer

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

use-resize-observer

9.1.0

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

react-resize-observer-hook

0.0.2

ResizeObserver + React hooks

use-measure

0.3.0

It's just a React hook for resize-observer, uses resize-observer-polyfill. Inspired by [react-measure](https://github.com/souporserious/react-measure)

react-cool-dimensions

3.0.1

React hook to measure an element's size and handle responsive components.

Gathering detailed insights and metrics for @react-hook/resize-observer

@react-hook/resize-observer - 2.0.2 | npmpackage.info

@react-hook/resize-observer

↩ Strongly typed, concurrent mode-safe React hooks

2.0.2

1,514

MIT

TypeScript

56.43 kB

2.4

Installations

npm install @react-hook/resize-observer

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

18.17.0

NPM Version

9.6.7 Score

97.8

Supply Chain

Quality

76.8

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

15

Total

244

Closed

199

Merged

30

Issues

Open

22

Total

73

Closed

51

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

Shell

TypeScript (85.29%)

JavaScript (14.55%)

Shell (0.17%)

Developer

jaredLunde

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,514 Stars

429 Commits

96 Forks

9 Watchers

14 Branches

27 Contributors

Updated on Jul 09, 2025

Maintainers

View All 27 Contributors

Package Meta Information

Latest Version

2.0.2

Package Id

@react-hook/resize-observer@2.0.2

Unpacked Size

56.43 kB

Size

11.71 kB

File Count

NPM Version

9.6.7

Node Version

18.17.0

Published on

Jul 30, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

1import * as React from 'react'
2import useResizeObserver from '@react-hook/resize-observer'
3
4const useSize = (target) => {
5  const [size, setSize] = React.useState()
6
7  React.useLayoutEffect(() => {
8    setSize(target.current.getBoundingClientRect())
9  }, [target])
10
11  // Where the magic happens
12  useResizeObserver(target, (entry) => setSize(entry.contentRect))
13  return size
14}
15
16const App = () => {
17  const target = React.useRef(null)
18  const size = useSize(target)
19  return (
20    <pre ref={target}>
21      {JSON.stringify({width: size.width, height: size.height}, null, 2)}
22    </pre>
23  )
24}

API

useResizeObserver(target, callback, options)

1function useResizeObserver<T extends Element>(
2  target: React.RefObject<T> | React.ForwardedRef<T> | T | null,
3  callback: UseResizeObserverCallback,
4  options?: UseResizeObserverOptions
5): 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

1export type UseResizeObserverCallback = (
2  entry: ResizeObserverEntry,
3  observer: ResizeObserver
4) => any

UseResizeObserverOptions

1export type UseResizeObserverOptions = {
2  polyfill?: any
3}

`polyfill`

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

1import useResizeObserver from '@react-hook/resize-observer'
2import {ResizeObserver} from '@juggle/resize-observer'
3
4useResizeObserver(..., ..., { polyfill: ResizeObserver })

LICENSE

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

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

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

@react-hook/resize-observer

Installations

Developer Guide

Yes

CommonJS, ESM

18.17.0

9.6.7

Score

Pull Requests

15

244

199

30

Issues

22

73

51

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

useResizeObserver()

Features

Quick Start

API

useResizeObserver(target, callback, options)

Types

UseResizeObserverCallback

UseResizeObserverOptions

polyfill

LICENSE

10

10

5

0

0

0

0

0

0

0

2.4

/10

`polyfill`