# react-virtualized-auto-sizer-pro

> Standalone version of the AutoSizer component from react-virtualized

Latest version **1.0.0** (published 2020-10-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-virtualized-auto-sizer-pro
pnpm add react-virtualized-auto-sizer-pro
yarn add react-virtualized-auto-sizer-pro
bun add react-virtualized-auto-sizer-pro
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-10-30 |
| First published | 2020-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >8.0.0 |
| Dependencies | 0 |
| Unpacked size | 37.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Kerita |
| Maintainers | kerita |
| Keywords | react, reactjs, virtual, window, windowed, list, scrolling, infinite, virtualized, table, grid, spreadsheet |

## Links

- npm: https://www.npmjs.com/package/react-virtualized-auto-sizer-pro
- Repository: https://github.com/kerita/react-virtualized-auto-sizer-pro
- Homepage: https://github.com/kerita/react-virtualized-auto-sizer-pro/
- Issues: https://github.com/kerita/react-virtualized-auto-sizer-pro/issues
- npm.io page: https://npm.io/package/react-virtualized-auto-sizer-pro

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-10-30

## README

# react-virtualized-auto-sizer-pro

> Standalone version of the AutoSizer component from react-virtualized, fork from [react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized-auto-sizer).
> Support deciding whether execute resize handler via `checkExecuteResizeHandler` props

## Install

```bash
npm install --save react-virtualized-auto-sizer-pro
```

## Documentation

High-order component that automatically adjusts the width and height of a single child.

### Prop Types

| Property                  | Type     | Required? | Description                                                                                                                                                                      |
| :------------------------ | :------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children                  | Function |     ✓     | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number }) => PropTypes.element`                  |
| checkExecuteResizeHandler | Function |           | Function responsible for deciding whether execute the resize handler, default return `true`; it is passed the following named parameters: `({ height: number, width: number })`. |
| className                 | String   |           | Optional custom CSS class name to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary.                                               |
| defaultHeight             | Number   |           | Height passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate height after mounting.                               |
| defaultWidth              | Number   |           | Width passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate width after mounting.                                 |
| disableHeight             | Boolean  |           | Fixed `height`; if specified, the child's `height` property will not be managed                                                                                                  |
| disableWidth              | Boolean  |           | Fixed `width`; if specified, the child's `width` property will not be managed                                                                                                    |
| nonce                     | String   |           | Nonce of the inlined stylesheets for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute)                                     |
| onResize                  | Function |           | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`.                                                            |
| style                     | Object   |           | Optional custom inline style to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary.                                                 |

### Examples

Many react-virtualized components require explicit dimensions but sometimes you just want a component to just grow to fill all of the available space.
The `AutoSizer` component can be useful in this case.

One word of caution about using `AutoSizer` with flexbox containers.
Flex containers don't prevent their children from growing and `AutoSizer` greedily grows to fill as much space as possible.
Combining the two can cause a loop.
The simple way to fix this is to nest `AutoSizer` inside of a `block` element (like a `<div>`) rather than putting it as a direct child of the flex container.
Read more about common `AutoSizer` questions [here](usingAutoSizer.md).

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { AutoSizer, List } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// List data as an array of strings
const list = [
  'Brian Vaughn',
  // And so on...
];

function rowRenderer({ key, index, style }) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  );
}

// Render your list
ReactDOM.render(
  <AutoSizer>
    {({ height, width }) => (
      <List
        height={height}
        rowCount={list.length}
        rowHeight={20}
        rowRenderer={rowRenderer}
        width={width}
      />
    )}
  </AutoSizer>,
  document.getElementById('example')
);
```

## License

MIT © [Kerita](https://github.com/kerita)

---
_Source: https://npm.io/package/react-virtualized-auto-sizer-pro · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._