React resize observer hook
npm install react-resize-hooknpm install --save react-resize-hook
or
yarn add react-resize-hook
To watch for resizes on an a ref which contains an HTML element use:
``javascript
...
import { useResizeObserver } from 'react-resize-hook'
...
const SomeFancyComponent = () => {
const containerRef = React.useRef(null)
const { width, height } = useResizeObserver({
elementRef: containerRef,
})
return (
...
`
To watch for resizes on a parent of the given ref one can use the parent level:
`javascript
...
import { useResizeObserver } from 'react-resize-hook'
...
const SomeFancyComponent = () => {
const containerRef = React.useRef(null)
const { width, height } = useResizeObserver({
elementRef: containerRef,
parentLevel: 1, // this will use containerRef.current.parentElement
})
return (
...
`
By default useResizeObserver watches for both width and height changes. You can only listen to width or height by adjusting the useResizeObserver params:
`javascript`
useResizeObserver({
elementRef: someRefWhichContainsADomElement,
handleWidth: true, // or false
handleHeight: true // or false
})
You can also observe changes on the entire page by calling:
`javascript`
useResizeObserver({
watchEntirePage: true,
handleWidth: true // or false,
handleHeight: true // or false,
})
Before the component is mounted (or before the first useEffect) width and height` are undefined.