Gathering detailed insights and metrics for react-virtualized-auto-sizer-pro
Gathering detailed insights and metrics for react-virtualized-auto-sizer-pro
npm install react-virtualized-auto-sizer-pro
Typescript
Module System
Min. Node Version
Node Version
NPM Version
67.7
Supply Chain
88.5
Quality
74.8
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
411
Last Day
1
Last Week
4
Last Month
8
Last Year
47
1 Stars
11 Commits
12 Branches
1 Contributors
Minified
Minified + Gzipped
Latest Version
1.0.0
Package Id
react-virtualized-auto-sizer-pro@1.0.0
Unpacked Size
37.18 kB
Size
7.09 kB
File Count
4
NPM Version
6.14.4
Node Version
12.16.3
Cumulative downloads
Total Downloads
Last day
0%
1
Compared to previous day
Last week
100%
4
Compared to previous week
Last month
300%
8
Compared to previous month
Last year
-34.7%
47
Compared to previous year
35
Standalone version of the AutoSizer component from react-virtualized, fork from react-virtualized-auto-sizer. Support deciding whether execute resize handler via
checkExecuteResizeHandler
props
1npm install --save react-virtualized-auto-sizer-pro
High-order component that automatically adjusts the width and height of a single child.
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 | |
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. |
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.
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import { AutoSizer, List } from 'react-virtualized'; 4import 'react-virtualized/styles.css'; // only needs to be imported once 5 6// List data as an array of strings 7const list = [ 8 'Brian Vaughn', 9 // And so on... 10]; 11 12function rowRenderer({ key, index, style }) { 13 return ( 14 <div key={key} style={style}> 15 {list[index]} 16 </div> 17 ); 18} 19 20// Render your list 21ReactDOM.render( 22 <AutoSizer> 23 {({ height, width }) => ( 24 <List 25 height={height} 26 rowCount={list.length} 27 rowHeight={20} 28 rowRenderer={rowRenderer} 29 width={width} 30 /> 31 )} 32 </AutoSizer>, 33 document.getElementById('example') 34);
MIT © Kerita
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 0/9 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
license file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
151 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More