React Resize Aware

⇲👁 A simple React Hook which allows to listen the resize event of any target element when it changes sizes
Alternatives To React Resize Aware
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Resize Detector1,1133,640654a month ago108April 09, 20232mitTypeScript
A Cross-Browser, Event-based, Element Resize Detection for React
Resize Observer886281803 months ago62August 01, 20219apache-2.0TypeScript
Polyfills the ResizeObserver API.
React Resize Aware4804164a year ago40February 08, 20222mitJavaScript
⇲👁 A simple React Hook which allows to listen the resize event of any target element when it changes sizes
React Viewport Utils16
a year ago9mitTypeScript
Utility components for working with the viewport in react
React Resize Context13
3 years ago15March 22, 20194mitTypeScript
⚡️A high performance React component for responding to resize event
React Window Resize Listener7
5 years agoJavaScript
This React component can be used to execute some tasks when the window resize event is triggered.
Alternatives To React Resize Aware
Select To Compare

Alternative Project Comparisons


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

import React from 'react';
import useResizeAware from 'react-resize-aware';

const App = () => {
  const [resizeListener, sizes] = useResizeAware();

  return (
    <div style={{ position: 'relative' }}>
      Your content here. (div sizes are {sizes.width} x {sizes.height})

Heads up!: Make sure to assign a position != initial to the HTMLElement you want to target (relative, absolute, or fixed will work).


The Hook returns an array with two elements inside:

[resizeListener, ...] (first element)

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.

[..., sizes] (second element)

This object contains the width and height properties, these properties are going to be null before the component rendered, and will return a number after the component rendered.

Custom reporter

You can customize the properties of the sizes object by passing a custom reporter function as first argument of useResizeAware.

const customReporter = target => ({
  clientWidth: target != null ? target.clientWidth : null,

const [resizeListener, sizes] = useResizeAware(customReporter);

return (
  <div style={{ position: 'relative' }}>
    Your content here. (div clientWidth is {sizes.clientWidth})

The above example will report the clientWidth 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:

const App = () => {
  const [resizeListener, sizes] = useResizeAware();
  React.useEffect(() => {
    console.log('Do something with the new size values');
  }, [sizes.width, sizes.height]);

  return (
    <div style={{ position: 'relative' }}>
      Your content here.
Popular Resize Events Projects
Popular Reactjs Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Resize Events