react-resize-context v3.0.0

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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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"]`).