react-resize-context

react-resize-context

A high performance React component for responding to resize event.

Install

npm install react-resize-context

Examples

• A simple example
• Multiple components listen resize event from the same parent element

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