
Product
Introducing Repository Labels and Security Policies
Socket is introducing a new way to organize repositories and apply repository-specific security policies.
virtualized-list
Advanced tools
A tiny vanilla virtualization library, with DOM diffing
Using npm:
npm install virtualized-list --save
const rows = ['a', 'b', 'c', 'd'];
const virtualizedList = new VirtualizedList(container, {
height: 500, // The height of the container
rowCount: rows.length,
renderRow: index => {
const element = document.createElement('div');
element.innerHTML = rows[index];
return element;
},
rowHeight: 150,
)};
const rows = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const rowHeights = [150, 120, 100, 80, 50, 35, 200, 500, 50, 300];
const virtualizedList = new VirtualizedList(container, {
height: 400,
rowCount: rows.length,
renderRow: (row, index) => {
const element = document.createElement('div');
element.innerHTML = row;
return element;
},
rowHeight: index => rowHeights[index],
estimatedRowHeight: 155,
overscanCount: 5, // Number of rows to render above/below the visible rows.
initialScrollIndex: 8,
onMount: () => {
// Programatically scroll to item index #3 after 2 seconds
setTimeout(() =>
virtualizedList.scrollToIndex(3)
, 2000);
}
)}
Property | Type | Required? | Description |
---|---|---|---|
height | Number | ✓ | Height of List. This property will determine the number of rendered vs virtualized items |
rowCount | Number | ✓ | The number of rows you want to render |
renderRow | Function | ✓ | Responsible for rendering an item given it's index: ({index: number, style: Object}): React.PropTypes.node . The returned element must handle key and style. |
rowHeight | Number, Array or Function | ✓ | Either a fixed height, an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: (index: number): number |
initialScrollTop | Number | The initial scrollTop value (optional) | |
initialIndex | Number | Initial item index to scroll to (by forcefully scrolling if necessary) | |
overscanCount | Number | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. Defaults to 3 | |
estimatedRowHeight | Number | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. | |
onMount | Function | Callback invoked once the virtual list has mounted. | |
onScroll | Function | Callback invoked onScroll. function (scrollTop, event) | |
onRowsRendered | Function | Callback invoked with information about the range of rows just rendered |
FAQs
A tiny, dependency free, virtualization library
We found that virtualized-list demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Socket is introducing a new way to organize repositories and apply repository-specific security policies.
Research
Security News
Socket researchers uncovered malicious npm and PyPI packages that steal crypto wallet credentials using Google Analytics and Telegram for exfiltration.
Product
Socket now supports .NET, bringing supply chain security and SBOM accuracy to NuGet and MSBuild-powered C# projects.