Skip to content

Commit ea38022

Browse files
authored
Update README.md
1 parent 6849ded commit ea38022

File tree

1 file changed

+5
-6
lines changed

1 file changed

+5
-6
lines changed

README.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,15 @@ A high performance React component for responding to resize event.
1111
npm install react-resize-context
1212
```
1313

14+
## Examples
15+
* [A simple example](https://codesandbox.io/embed/jjjmp4z6yy)
16+
* [Multiple components listen resize event from the same parent element](https://codesandbox.io/embed/vnz20v4j65)
1417

1518
## APIs
16-
Provides a `{ ResizeProvider, ResizeConsumer }` pair which just like React's [Context API](https://reactjs.org/docs/context.html). When renders a context `ResizeConsumer`, it will linsten to the resize event from the [children](https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx) of closest matching `ResizeProvider` above it in the tree.
19+
Provides a `{ ResizeProvider, ResizeConsumer }` pair which just like React's [Context API](https://reactjs.org/docs/context.html). When renders a context `ResizeConsumer`, it will listen to the resize event from the [children](https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx) of closest matching `ResizeProvider` above it in the tree.
1720

1821
### \<ResizeProvider \/\>
19-
> A React component that allows `ResizeConsumer` to linsten to the resize event from `ResizeProvider`'s children element.
22+
> A React component that allows `ResizeConsumer` to listen to the resize event from `ResizeProvider`'s children element.
2023
2124
### \<ResizeConsumer \/\>
2225
> It is also a React component that triggers two callback functions when the element is resized. One is `onSizeChanged` and the other is `updateDatasetBySize`.
@@ -36,7 +39,3 @@ type updateDatasetBySize = (size: Size) => DOMStringMap;
3639

3740
#### About `updateDatasetBySize`
3841
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"]`).
39-
40-
## Examples
41-
* [A simple example](https://codesandbox.io/embed/jjjmp4z6yy)
42-
* [Multiple components listen resize event from the same parent element](https://codesandbox.io/embed/vnz20v4j65)

0 commit comments

Comments
 (0)