Cassandra.ToolsAboutKnowledge Base

React Virtuoso

petyosi/react-virtuoso (2084)
Languages:Typescript, Javascript, CSS, Shell
Templates:React
License:MIT

Getting Started

React Virtuoso is a simple, easy to use React virtualized list component that can render huge data sets. Out of the box, Virtuoso:

  • Handles items with variable dynamic height; no manual measurements or hard-coding of item heights necessary;
  • Supports grouping with sticky headers;
  • Supports responsive grid layout;
  • Automatically handles content resizing;
  • Supports headers and footers.
  • Can pin the first N items to the top of the list.

Installation

Install Virtuoso using the following script:

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'))

Or see more detailed instructions on the Getting Started Documentation Page

Adding it to your Application

Add the React Virtuoso to your application using

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

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

ReactDOM.render(<App />, document.getElementById('root'))

Documentation and Demos

For in-depth documentation and live examples of the supported features and live demos, check the documentation website.

Browser Support

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

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.

The GitHub link is here.

License

MIT License

© 2022 Anant Corporation, All Rights Reserved. All logos, trademarks and registered trademarks are the property of their respective owners.