# @react-hook/resize-observer
> A React hook that fires a callback whenever ResizeObserver detects a change to its size
Latest version **2.0.2** (published 2024-07-30) · MIT license · 0 weekly downloads
## Install
```sh
npm install @react-hook/resize-observer
pnpm add @react-hook/resize-observer
yarn add @react-hook/resize-observer
bun add @react-hook/resize-observer
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.0.2 |
| Published | 2024-07-30 |
| First published | 2020-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 56.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1530 |
| Author | Jared Lunde |
| Maintainers | jaredlunde |
| Keywords | react, react hook, resize observer, resize observer hook, resize observer react hook, use-resize-observer, useresizeobserver, resize hook, size hook |
## Links
- npm: https://www.npmjs.com/package/@react-hook/resize-observer
- Repository: https://github.com/jaredLunde/react-hook
- Homepage: https://github.com/jaredLunde/react-hook/tree/master/packages/resize-observer#readme
- Issues: https://github.com/jaredLunde/react-hook/issues
- npm.io page: https://npm.io/package/@react-hook/resize-observer
## Dependencies (2)
- [@react-hook/latest](https://npm.io/package/@react-hook/latest.md) ^1.0.2
- [@react-hook/passive-layout-effect](https://npm.io/package/@react-hook/passive-layout-effect.md) ^1.2.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.0.2 (latest) — 2024-07-30
- 2.0.1 — 2024-05-16
- 2.0.0 — 2024-05-16
- 1.2.6 — 2022-07-27
- 1.2.5 — 2021-12-01
- 1.2.4 — 2021-09-01
- 1.2.3 — 2021-09-01
- 1.2.2 — 2021-06-21
- 1.2.1 — 2021-06-21
- 1.2.0 — 2021-02-20
- 1.1.2 — 2021-01-31
- 1.1.1 — 2021-01-31
- 1.1.0 — 2020-06-07
- 1.0.4 — 2020-06-04
- 1.0.3 — 2020-05-27
- … 5 more at https://npm.io/package/@react-hook/resize-observer/versions
## README
npm i @react-hook/resize-observer
A React hook that fires a callback whenever ResizeObserver detects a change to its size.
## Features
- [x] Uses a single `ResizeObserver` for tracking all elements used by the hooks.
[This approach is astoundingly more performant](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ)
than using a `ResizeObserver` per element which most hook implementations do.
- [x] Automatically unobserves the target element when the hook unmounts.
- [x] 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**](https://codesandbox.io/s/react-hookresize-observer-example-ft88x)
```jsx harmony
import * as React from 'react'
import useResizeObserver from '@react-hook/resize-observer'
const useSize = (target) => {
const [size, setSize] = React.useState()
React.useLayoutEffect(() => {
setSize(target.current.getBoundingClientRect())
}, [target])
// Where the magic happens
useResizeObserver(target, (entry) => setSize(entry.contentRect))
return size
}
const App = () => {
const target = React.useRef(null)
const size = useSize(target)
return (
{JSON.stringify({width: size.width, height: size.height}, null, 2)}
)
}
```
## API
### useResizeObserver(target, callback, options)
```ts
function useResizeObserver(
target: React.RefObject | React.ForwardedRef | T | null,
callback: UseResizeObserverCallback,
options?: UseResizeObserverOptions
): ResizeObserver
```
| Argument | Type | Required? | Description |
| -------- | --------------------------------------------------------- | --------- | ------------------------------------------------------------------------- |
| target | React.RefObject | T | null | Yes | A React ref created by `useRef()` or an HTML element |
| callback | [`UseResizeObserverCallback`](#useresizeobservercallback) | Yes | Invoked with a single `ResizeObserverEntry` any time the `target` resizes |
| options | [`UseResizeObserverOptions`](#useresizeobserveroptions) | No | Options for the `ResizeObserver` instance. |
## Types
### UseResizeObserverCallback
```ts
export type UseResizeObserverCallback = (
entry: ResizeObserverEntry,
observer: ResizeObserver
) => any
```
### UseResizeObserverOptions
```ts
export type UseResizeObserverOptions = {
polyfill?: any
}
```
#### `polyfill`
A `ResizeObserver` polyfill implementation such as `@juggle/resize-observer` (this was the default in V1.x).
```ts
import useResizeObserver from '@react-hook/resize-observer'
import {ResizeObserver} from '@juggle/resize-observer'
useResizeObserver(..., ..., { polyfill: ResizeObserver })
```
## LICENSE
MIT
---
_Source: https://npm.io/package/@react-hook/resize-observer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
