https://github.com/niexq/react-auto-sizer

🧗‍♂️ 自动计算宽高的react组件（React components that automatically calculate width and height）
https://github.com/niexq/react-auto-sizer

auto-sizer react-resizeobserver resizeobserver

Last synced: about 1 year ago
JSON representation

🧗‍♂️ 自动计算宽高的react组件（React components that automatically calculate width and height）

• Host: GitHub
• URL: https://github.com/niexq/react-auto-sizer
• Owner: niexq
• License: mit
• Created: 2021-08-17T09:28:21.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-06-18T07:13:18.000Z (about 2 years ago)
• Last Synced: 2025-05-04T02:02:49.435Z (about 1 year ago)
• Topics: auto-sizer, react-resizeobserver, resizeobserver
• Language: JavaScript
• Homepage: https://niexq.github.io/react-auto-sizer/zh-CN
• Size: 2.7 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.en-US.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  

    

  



Welcome to react-auto-sizer 👋



  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



> React components that automatically calculate width and height

[ 简体中文 ](./README.md) | English

### 🏠 [Homepage](https://niexq.github.io/react-auto-sizer)

![](https://raw.githubusercontent.com/niexq/picbed/main/picgo/react-auto-sizer-en-US.gif)

### 📦 Install

```bash

  yarn add @oyyds/react-auto-sizer  # or npm i @oyyds/react-auto-sizer -S

```

### 🔨 Use

```tsx | pure

import AutoSizer from '@oyyds/react-auto-sizer';

const AutoSizeComponent = () => {

  return (

    


      

        {({ width, height }) => (

          


            Content area

          

        )}

      

    

  );

};

```


## 🦧 Author

- Website: https://juejin.cn/user/4318537404123688/posts

- Github: [@niexq](https://github.com/niexq)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/niexq/react-auto-sizer/issues).

## ❤️ Show your support

Give a ⭐️ if this project helped you!

## 📝 License

This project is [MIT](https://github.com/niexq/react-auto-sizer/blob/main/LICENSE) licensed.

## 🐳 Link

[react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized-auto-sizer)
 [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver)

## 🌐 Browsers support

| 
Chrome | 
 Edge | 
Firefox | 
Internet Explorer | 
Opera | 
Safari | 
WebView Android | 
Chrome Android | 
Firefox Android | 
Opera Android | 
Safari iOS | 
Samsung Internet |

| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |

| 64 | 79 | 69 | ❌ | 51 | 13.1 | 64 | 64 | 79 | 47 | 13.4 | 9.0 |