{"library":"react-list","title":"ReactList: Infinite Scroll Component","description":"ReactList is a versatile React component designed for rendering large, scrollable lists efficiently. It leverages virtualization techniques to render only the visible items, significantly improving performance for long lists. Currently at version 0.8.18, it maintains broad compatibility with React versions from 0.14 through 19. While a 0.x.x version suggests a pre-1.0 stable release, its ongoing compatibility with modern React indicates active maintenance. Key differentiators include support for different item sizing strategies via its `type` prop (uniform, variable, simple), custom item and items renderers, and flexible control over the scroll parent, making it adaptable to various UI layouts and performance needs. It focuses on providing a performant scrolling experience without over-rendering DOM elements.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-list"],"cli":null},"imports":["import ReactList from 'react-list';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactList from 'react-list';\n\n// Mock data loading function\nconst loadAccounts = (callback) => {\n  setTimeout(() => {\n    const accounts = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Account ${i + 1}` }));\n    callback(accounts);\n  }, 50);\n};\n\nclass MyComponent extends React.Component {\n  state = {\n    accounts: []\n  };\n\n  componentDidMount() {\n    loadAccounts(this.handleAccounts);\n  }\n\n  handleAccounts = (accounts) => {\n    this.setState({ accounts });\n  };\n\n  renderItem = (index, key) => {\n    const account = this.state.accounts[index];\n    if (!account) return null; // Handle cases where data might be loading or out of sync\n    return <div key={key} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>{account.name}</div>;\n  };\n\n  render() {\n    return (\n      <div>\n        <h1>Accounts</h1>\n        <div style={{ overflow: 'auto', maxHeight: 400, border: '1px solid #ccc' }}>\n          <ReactList\n            itemRenderer={this.renderItem}\n            length={this.state.accounts.length}\n            type='uniform'\n            threshold={200}\n          />\n        </div>\n        <p>Showing {this.state.accounts.length} accounts.</p>\n      </div>\n    );\n  }\n}\n\n// Example of how to use it in a parent component (for demonstration)\n// function App() {\n//   return <MyComponent />;\n// }\n// export default App;","lang":"javascript","description":"Demonstrates a basic ReactList setup to render 1000 uniform items with a mock data loader, showcasing its infinite scroll capabilities within a fixed-height container.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}