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.
A React component that allows ResizeConsumer
to listen to the resize event from ResizeProvider
’s children element.
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;
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"]
).
Author: LeetCode-OpenSource
Demo: https://codesandbox.io/embed/jjjmp4z6yy
Source Code: https://github.com/LeetCode-OpenSource/react-resize-context
#react #reactjs #javascript