A high performance React component for responding to resize event

react-resize-context

A high performance React component for responding to resize event.

APIs

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"]).

GitHub