use-resize-observer

- Features
- Installation
- Usage
- Provide a ref from useRef
- Provide a DOM element
- API
- License

!npm bundle size

React implementation of the
Resize Observer Interface
to tell you when an element resizes.

Demo: Code Sandbox

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
> 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

$3

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


}
`

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


}
`

$3

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


}
`

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.