https://github.com/asyarb/use-resize-observer
A small React hook wrapper around the ResizeObserver() browser API.
https://github.com/asyarb/use-resize-observer
hooks react resizeobserver
Last synced: over 1 year ago
JSON representation
A small React hook wrapper around the ResizeObserver() browser API.
- Host: GitHub
- URL: https://github.com/asyarb/use-resize-observer
- Owner: asyarb
- License: mit
- Created: 2019-05-02T03:35:08.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T05:09:19.000Z (over 3 years ago)
- Last Synced: 2025-02-28T19:28:04.649Z (over 1 year ago)
- Topics: hooks, react, resizeobserver
- Language: TypeScript
- Size: 1.51 MB
- Stars: 7
- Watchers: 0
- Forks: 0
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# use-resize-observer
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Provide a `ref` from `useRef`](#provide-a-ref-from-useref)
- [Provide a DOM element](#provide-a-dom-element)
- [API](#api)
- [License](#license)
[](https://www.npmjs.com/package/@asyarb/use-resize-observer)
React implementation of the
[Resize Observer Interface](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
to tell you when an element resizes.
**Demo**: [Code Sandbox](https://codesandbox.io/s/74n0p5xr0j)
# Features
- **Hooks** - Just pass a ref!
- **Alternative API** - Pass an `Element` and an optional function to handle
`ResizeObserver` callbacks.
- **Typed** - Written with TypeScript!
> ⚠️ This package includes
> [`resize-observer-polyfill`](https://www.npmjs.com/package/resize-observer-polyfill)
> for full browser support. This package ponyfills `ResizeObserver` at runtime
> based on the browser.
# Installation
Run the following:
```bash
# Yarn
yarn add @asyarb/use-resize-observer
# NPM
npm i @asyarb/use-resize-observer --save
```
# Usage
### Provide a `ref` from `useRef`
To observe the resizing of a component, pass a `ref` for a component to
`useResizeObserver`:
```jsx
const Example = () => {
const ref = useRef()
const [height, setHeight] = useState(0)
// Get the content rect directly from the hook:
const sizes = useResizeObserver({ ref })
// Perform any side effect with those sizes!
useEffect(() => void setHeight(sizes.height), [sizes])
return
Some content...
}
```
`sizes` will be updated whenever the observed element is resized.
Alternatively, you can pass a function as the second parameter to perform any
side effect on resize. This function receives the `ResizeObserver` entry
(`ResizeObserverEntry`) object as an argument.
```jsx
const Example = () => {
const ref = useRef
const [height, setHeight] = useState(0)
// Provide an optional callback to perform side effects instead:
useResizeObserver({
ref,
callback: entry => setHeight(entry.contentRect.height),
})
return
Some content...
}
```
### Provide a DOM element
`useResizeObserver` can alternatively take an `HTMLElement` such as the return
value from `document.querySelector()`.
```jsx
const element = document.querySelector('.someClass')
const Example = () => {
const [height, setHeight] = useState(0)
// Pass an HTMLElement directly:
const sizes = useResizeObserver({ element })
// Perform any side effect with that element's sizes!
useEffect(() => void setHeight(sizes.height), [sizes])
return
Some content...
}
```
Just like the previous example, you can also provide a callback function.
## API
| Argument | Required | Description |
| ---------- | :------: | --------------------------------------------------------------------------------------------------------------- |
| `ref` | NP | React `ref` to observe. |
| `element` | No | HTML `Element` to observe. If both `ref` and `element` are provided, `ref` is prioritized. |
| `callback` | No | Optional callback to fire on resize. Receives the `ResizeObserverEntry` for the observed element as an argument |
# License
MIT.