npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@shopstic/react-virtuoso

v2.8.3-2

Published

<img src="https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png" width="229" />

Downloads

4

Readme

npm version

React Virtuoso is the most powerful React virtual list/table component, full stop. Here's why:

For live examples and documentation, check the documentation website.

Sponsors

Stream

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

npm install react-virtuoso
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'

const App = () => {
  return <Virtuoso style={{ height: '400px' }} totalCount={200} itemContent={index => <div>Item {index}</div>} />
}

ReactDOM.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 exposes groupCounts: 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 itemContent property, the component requires an additional groupContent property, which renders the group header. The groupContent callback 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.