Socket
Socket
Sign inDemoInstall

rc-virtual-list

Package Overview
Dependencies
12
Maintainers
2
Versions
115
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-virtual-list

React Virtual List Component


Version published
Maintainers
2
Weekly downloads
1,177,471
decreased by-6.53%

Weekly downloads

Package description

What is rc-virtual-list?

The rc-virtual-list npm package is a React component for efficiently rendering large lists and tabular data. It only renders the items that are currently visible in the viewport, which helps in improving the performance of the application by reducing the number of DOM nodes.

What are rc-virtual-list's main functionalities?

Basic Virtual List

This code sample demonstrates how to create a basic virtual list with fixed item height. The 'data' prop is an array of items to display, 'height' sets the height of the list, 'itemHeight' is the height of each item, and 'itemKey' is a unique key for each item.

import VirtualList from 'rc-virtual-list';

<VirtualList
  data={data}
  height={200}
  itemHeight={20}
  itemKey='id'
>{(item) => <div>{item.name}</div>}</VirtualList>

Dynamic Item Height

This code sample shows how to handle dynamic item heights. The 'style' parameter is used to apply necessary styles for positioning items in the virtual list.

import VirtualList from 'rc-virtual-list';

<VirtualList
  data={data}
  height={200}
  itemKey='id'
>{(item, index, style) => (
  <div style={style}>{item.name}</div>
)}</VirtualList>

Custom Scrollbar

This example illustrates how to integrate a custom scrollbar component into the virtual list. The 'components' prop allows you to replace the default scrollbar with a custom one.

import VirtualList from 'rc-virtual-list';
import CustomScrollbar from 'custom-scrollbar-component';

<VirtualList
  data={data}
  height={200}
  itemHeight={20}
  itemKey='id'
  components={{
    scrollbar: CustomScrollbar
  }}
>{(item) => <div>{item.name}</div>}</VirtualList>

Other packages similar to rc-virtual-list

Readme

Source

rc-virtual-list

React Virtual List Component which worked with animation.

NPM version dumi build status Test coverage node version npm download

Online Preview

https://virtual-list-react-component.vercel.app/

Development

npm install
npm start
open http://localhost:9001/

Feature

  • Support react.js
  • Support animation
  • Support IE11+

Install

rc-virtual-list

Usage

import List from 'rc-virtual-list';

<List data={[0, 1, 2]} height={200} itemHeight={30} itemKey="id">
  {index => <div>{index}</div>}
</List>;

API

List

PropDescriptionTypeDefault
childrenRender props of item(item, index, props) => ReactElement-
componentCustomize List dom elementstring | Componentdiv
dataData listArray-
disabledDisable scroll check. Usually used on animation controlbooleanfalse
heightList heightnumber-
itemHeightItem minium heightnumber-
itemKeyMatch key with itemstring-
stylesstyle{ horizontalScrollBar?: React.CSSProperties; horizontalScrollBarThumb?: React.CSSProperties; verticalScrollBar?: React.CSSProperties; verticalScrollBarThumb?: React.CSSProperties; }-

children provides additional props argument to support IE 11 scroll shaking. It will set style to visibility: hidden when measuring. You can ignore this if no requirement on IE.

Keywords

FAQs

Last updated on 01 Feb 2024

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc