Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-virtualized-auto-sizer

Package Overview
Dependencies
Maintainers
2
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-virtualized-auto-sizer

Standalone version of the AutoSizer component from react-virtualized

  • 1.0.24
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
994K
decreased by-16.9%
Maintainers
2
Weekly downloads
 
Created

What is react-virtualized-auto-sizer?

The react-virtualized-auto-sizer package is a utility component for React that automatically adjusts the size of its child component to fit the available space. It is commonly used in conjunction with other virtualization libraries to create performant, scrollable lists or grids that can handle large datasets efficiently.

What are react-virtualized-auto-sizer's main functionalities?

Auto-sizing a child component

This feature allows you to automatically adjust the size of a List component from the react-virtualized library to fit the available space. The AutoSizer component wraps around the List and provides the height and width as props.

```jsx
import React from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { List } from 'react-virtualized';

const MyList = ({ items }) => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        height={height}
        width={width}
        rowCount={items.length}
        rowHeight={20}
        rowRenderer={({ index, key, style }) => (
          <div key={key} style={style}>
            {items[index]}
          </div>
        )}
      />
    )}
  </AutoSizer>
);

export default MyList;
```

Other packages similar to react-virtualized-auto-sizer

Keywords

FAQs

Package last updated on 06 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc