🖥 Environment Support

• Modern browsers
• Server-side Rendering
• Electron

| IE / Edge | Firefox | Chrome | Safari | Electron | | --------- | --------- | --------- | --------- | --------- | | Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

📦 Install

npm install ro-virtual-scroll

🔨 Usage

Then add the component to your react app. For example:

index.js

import React from 'react';
import faker from 'faker';
import RoVirtualScroller from 'ro-virtual-scroll';

const listData = new Array(500000).fill(null).map((item, index) => ({
  key: `_${index}`,
  value: `${index}_${faker.lorem.sentences()}`,
}));

export default function TestVirtual() {
  return (
    <RoVirtualScroller
      className="someclass"
      style={{ height: '500px', width: '400px' }}
      listData={listData}
      estimatedItemSize={50}
      render={(visibleData) =>
        visibleData.map((item) => (
          <div key={item.key} style={{ borderBottom: '1px solid black' }}>
            <div>{item.value}</div>
          </div>
        ))
      }
    />
  );
}