@akchayatyasser/virtualizedlist

A virtualized list component for React that efficiently renders large lists by only rendering the visible items.

Installation

You can install the package using npm:

npm install @akchayatyasser/virtualizedlist

Or using Yarn:

yarn add @akchayatyasser/virtualizedlist

Usage

Here's an example of how to use the VirtualizedList component:

import React from 'react';
import VirtualizedList from '@akchayatyasser/virtualizedlist';

const App = () => {
  const data = Array.from({ length: 1000 }, (_, index) => `Item ${index + 1}`);
  const itemHeight = 50; // Height of each item in pixels
  const visibleItemCount = 10; // Number of items visible in the viewport

  return (
    <div>
      <h1>Virtualized List Example</h1>
      <VirtualizedList data={data} itemHeight={itemHeight} visibleItemCount={visibleItemCount} />
    </div>
  );
};

export default App;

Props

The VirtualizedList component accepts the following props:

• data (Array): The array of data items to render.
• itemHeight (number): The height of each item in pixels.
• visibleItemCount (number): The number of items visible in the viewport.

Development

To run the development environment:

1. Clone the repository:

   git clone https://github.com/AkchayatYasser/Virtualized-list.git
   cd virtualizedlist

2. Install dependencies:

   npm install

3. Run the build script:

   npm run build

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any bugs or features.

Acknowledgements

This project was inspired by the need to efficiently render large lists in React applications.