A React hook that makes it possible to listen to element resize events.
npm install react-resize-awareIt does one thing, it does it well: listens to resize events on any HTML element.
react-resize-aware is a zero dependency, ~600 bytes React Hook you can use to detect resize events without relying on intervals, loops, DOM manipulation detection or CSS redraws.
It takes advantage of the resize event on the HTMLObjectElement, works on any browser I know of, and it's super lightweight.
In addition, it doesn't directly alters the DOM, everything is handled by React.
> Looking for the 2.0 docs? Click here
``
yarn add react-resize-aware
or with npm:
`
npm install --save react-resize-aware
The API is simple yet powerful, the useResizeAware Hook
returns a React node you will place inside the measured element, and an object containing its sizes:
`jsx
import React from "react";
import useResizeAware from "react-resize-aware";
const App = () => {
const [resizeListener, sizes] = useResizeAware();
return (
> Heads up!: Make sure to assign a
to the HTMLElement you want to target (relative, absolute, or fixed will work).API
The Hook returns an array with two elements inside:
$3
This is an invisible React node that must be placed as direct-child of the HTMLElement you want to listen the resize events of.
The node is not going to interfer with your layouts, I promise.
$3
This object contains the
width and height properties, it could be null if the element is not yet rendered.Custom
reporterYou can customize the properties of the
object by passing a custom reporter function as first argument of useResizeAware.`tsx
const customReporter = (target: ?HTMLIFrameElement) => ({
clientWidth: target != null ? target.clientWidth : 0,
});const [resizeListener, sizes] = useResizeAware(customReporter);
return (
{resizeListener}
Your content here. (div clientWidth is {sizes.clientWidth})
);
`The above example will report the
rather than the default offsetWidth and offsetHeight.React to size variations
For completeness, below you can find an example to show how to make your code react to size variations using React Hooks:
`jsx
const App = () => {
const [resizeListener, sizes] = useResizeAware(); React.useEffect(() => {
console.log("Do something with the new size values");
}, [sizes.width, sizes.height]);
return (
{resizeListener}
Your content here.
);
};
``