React Resize Context

⚡️A high performance React component for responding to resize event


npm version PRs Welcome MIT Licence

A high performance React component for responding to resize event.


npm install react-resize-context



Provides a { ResizeProvider, ResizeConsumer } pair which just like React's Context API. When renders a context ResizeConsumer, it will listen to the resize event from the children of closest matching ResizeProvider above it in the tree.

<ResizeProvider />

A React component that allows ResizeConsumer to listen to the resize event from ResizeProvider's children element.

<ResizeConsumer />

It is also a React component that triggers two callback functions when the element is resized. One is onSizeChanged and the other is updateDatasetBySize.

interface Size {
  width: number;
  height: number;

interface DOMStringMap {
    [name: string]: string | undefined;

type onSizeChanged =  (size: Size) => void;
type updateDatasetBySize = (size: Size) => DOMStringMap;

About updateDatasetBySize

The return value of updateDatasetBySize is updated to the dataset of the current ResizeConsumer's DOM element, so we can easily update the styles of different sizes through the CSS attribute selectors (eg: [data-size="small"]).

Popular Performance Projects
Popular Resize Events Projects
Popular Software Performance Categories
Related Searches

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