Gathering detailed insights and metrics for @dicta/react-virtuoso
Gathering detailed insights and metrics for @dicta/react-virtuoso
The most powerful virtual list component for React
Installations
npm install @dicta/react-virtuosoDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=10
Node Version
16.15.0
NPM Version
8.5.5
Score
65.2
Supply Chain
93.5
Quality
75.4
Maintenance
100
Vulnerability
100
License
Releases
241
react-virtuoso@4.12.7
react-virtuoso@4.12.7
Updated on May 02, 2025
@virtuoso.dev/masonry@1.3.3
@virtuoso.dev/masonry@1.3.3
Updated on Mar 30, 2025
react-virtuoso@4.12.6
react-virtuoso@4.12.6
Updated on Mar 29, 2025
react-virtuoso@4.12.5
react-virtuoso@4.12.5
Updated on Feb 08, 2025
react-virtuoso@4.12.4
react-virtuoso@4.12.4
Updated on Feb 08, 2025
v4.12.3
v4.12.3
Updated on Dec 01, 2024
Languages
3
TypeScript
CSS
JavaScript
TypeScript (97.12%)
CSS (1.73%)
JavaScript (1.14%)
Developer
Download Statistics
Total Downloads
1,833
Last Day
2
Last Week
7
Last Month
32
Last Year
412
GitHub Statistics
5,679 Stars
623 Commits
322 Forks
29 Watchers
14 Branches
83 Contributors
Updated on May 10, 2025
Bundle Size
130.23 kB
Minified
42.32 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.0.6-development
Package Id
@dicta/react-virtuoso@0.0.6-development
Unpacked Size
17.81 MB
Size
3.25 MB
File Count
216
NPM Version
8.5.5
Node Version
16.15.0
Total Downloads
Cumulative downloads
Total Downloads
1,833
Last Day
-50%
2
Compared to previous day
Last Week
-12.5%
7
Compared to previous week
Last Month
-44.8%
32
Compared to previous month
Last Year
-0.5%
412
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
51
@commitlint/cli@commitlint/config-conventional@emotion/core@emotion/styled@faker-js/faker@microsoft/api-extractor@playwright/test@testing-library/react@types/jest@types/jsdom@types/lodash@types/react@types/react-beautiful-dnd@types/react-dom@types/react-router-dom@types/react-table@types/react-test-renderer@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-eslinteslinteslint-config-prettiereslint-config-react-appeslint-plugin-flowtypeeslint-plugin-htmleslint-plugin-importeslint-plugin-jsoneslint-plugin-jsx-a11yeslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hookshuskyjestjsdomlodashmicrobundleparcelplaywrightprettierprocessreactreact-beautiful-dndreact-domreact-router-domreact-tablereact-test-rendererrollup-plugin-dtssemantic-releasets-jesttslibtypescript
React Virtuoso is the most powerful React virtual list/table component, full stop. Here's why:
- Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;
- Support for reverse (bottom up) scrolling and prepending items (chat, feeds, etc);
- Grouped mode with sticky headers;
- Responsive grid layout;
- Table Support;
- Automatic handling of content resize;
- Custom Header, Footer, and empty list components;
- Pinned top items;
- Endless scrolling, press to load more;
- Initial top most item index;
- Scroll to index method.
For live examples and documentation, check the documentation website.
Sponsors
React Virtuoso is proudly sponsored by Stream, the leading provider in enterprise grade Feed & Chat APIs. To learn more about Stream, click here.
If you are using Virtuoso for work, sponsor it. Any donation helps a lot with the project development and maintenance.
Get Started
1npm install react-virtuoso
1import * as React from 'react' 2import * as ReactDOM from 'react-dom' 3import { Virtuoso } from 'react-virtuoso' 4 5const App = () => { 6 return <Virtuoso style={{ height: '400px' }} totalCount={200} itemContent={(index) => <div>Item {index}</div>} /> 7} 8 9ReactDOM.render(<App />, document.getElementById('root'))
Grouped Mode
The GroupedVirtuoso component is a variant of the "flat" Virtuoso, with the following differences:
- Instead of
totalCount, the component exposesgroupCounts: number[]property, which specifies the amount of items in each group. For example, passing[20, 30]will render two groups with 20 and 30 items each; - In addition the
itemContentproperty, the component requires an additionalgroupContentproperty, which renders the group header. ThegroupContentcallback receives the zero-based group index as a parameter.
Grid
The VirtuosoGrid component displays same sized items in multiple columns.
The layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc.
Table
The TableVirtuoso component works just like Virtuoso, but with HTML tables.
It supports window scrolling, sticky headers, sticky columns, and works with React Table and MUI Table.
Works With Your UI Library of Choice
You can customize the markup up to your requirements - check the Material UI list demo. If you need to support reordering, check the React Sortable HOC example.
Documentation and Demos
For in-depth documentation and live examples of the supported features and live demos, check the documentation website.
Browser support
To support legacy browsers, you might have to load a ResizeObserver Polyfill before using react-virtuoso:
import ResizeObserver from 'resize-observer-polyfill'
if (!window.ResizeObserver)
window.ResizeObserver = ResizeObserver
Author
Petyo Ivanov @petyosi.
Contributing
Fixes and new Features
To run the tests, use npm run test.
An end-to-end browser-based test suite is runnable with npm run e2e, with the pages being e2e/*.tsx and the tests e2e/*.test.ts.
A convenient way to debug something is to preview the test cases in the browser.
To do that, run npm run browse-examples - it will open a crude UI that lets you browse the components in the e2e folder.
Docs
The documentation site is built with docusaurus and the content is available in the site/docs directory.
The API reference is generated from the doc comments in src/components.tsx.
License
MIT License.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
30 commit(s) and 21 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
6 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-f7f6-9jq7-3rqj
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-m5qc-5hw7-8vg7
- Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/petyosi/react-virtuoso/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/petyosi/react-virtuoso/main.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/petyosi/react-virtuoso/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/petyosi/react-virtuoso/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/virtuoso.dev.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/petyosi/react-virtuoso/virtuoso.dev.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/virtuoso.dev.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/petyosi/react-virtuoso/virtuoso.dev.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/virtuoso.dev.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/petyosi/react-virtuoso/virtuoso.dev.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/virtuoso.dev.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/petyosi/react-virtuoso/virtuoso.dev.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/virtuoso.dev.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/petyosi/react-virtuoso/virtuoso.dev.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/main.yml:25
- Warn: npmCommand not pinned by hash: .github/workflows/main.yml:26
- Warn: npmCommand not pinned by hash: .github/workflows/virtuoso.dev.yml:46
- Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 1 out of 4 npmCommand dependencies pinned
Reason
Found 0/24 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Info: topLevel 'contents' permission set to 'read': .github/workflows/virtuoso.dev.yml:12
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 6 are checked with a SAST tool
Score
3.6
/10
Last Scanned on 2025-05-05
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