https://github.com/leetcode-opensource/react-resize-context

⚡️A high performance React component for responding to resize event
https://github.com/leetcode-opensource/react-resize-context

leetcode react react-context resize resize-events resize-observer

Last synced: 2 months ago
JSON representation

⚡️A high performance React component for responding to resize event

• Host: GitHub
• URL: https://github.com/leetcode-opensource/react-resize-context
• Owner: LeetCode-OpenSource
• License: mit
• Created: 2018-07-28T16:18:30.000Z (over 6 years ago)
• Default Branch: develop
• Last Pushed: 2023-04-07T09:53:19.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T01:09:16.199Z (3 months ago)
• Topics: leetcode, react, react-context, resize, resize-events, resize-observer
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-resize-context
• Size: 344 KB
• Stars: 22
• Watchers: 5
• Forks: 3
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-resize-context

[![npm version](https://badge.fury.io/js/react-resize-context.svg)](https://www.npmjs.com/package/react-resize-context)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/LeetCode-OpenSource/react-resize-context/pulls)

[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)

A high performance React component for responding to resize event.

### Install

```bash

npm install react-resize-context

```

## Examples

* [A simple example](https://codesandbox.io/embed/jjjmp4z6yy)

* [Multiple components listen resize event from the same parent element](https://codesandbox.io/embed/vnz20v4j65)

## APIs

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.

### \

> 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`.

```typescript

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