react-auto-sizer

πŸ“– React components that automatically calculate width and height

Simple

Developers get started at zero cost

small size

Using render-props mode, using react-hook and ResizeObserver implementation, the code is maximized and streamlined

Production available

Has been tested and polished in enough business scenarios within the company

πŸ“¦ Install

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

πŸ”¨ Use

import AutoSizer from '@oyyds/react-auto-sizer';
const AutoSizeComponent = () => {
return (
<div>
<AutoSizer>
{({ width, height }) => (
<div
style={{
width,
height,
}}
>
Content area
</div>
)}
</AutoSizer>
</div>
);
};

πŸ”‘ Feedback and co-construction

Github IssueDingding group
react-auto-sizer/issues