react-virtualize-manish

Getting started

Install react-virtualize-manish using npm.

npm install react-virtualize-manish

Description

A react package which lets you implement react virtualisation

Pre-requisite:

Should be using react versions above 16.0.0 or above

Example

import React from "react";
import YourComponent from "react-virtualize-manish";

function Test() {
  const people = [
    {
      name: "John Doe",
      age: 25,
    },
    {
      name: "Jane Smith",
      age: 30,
    },
    {
      name: "Alice Johnson",
      age: 22,
    },
    {
      name: "Bob Brown",
      age: 28,
    },
    {
      name: "Charlie Davis",
      age: 35,
    },
  ];
  const item = ({ item }) => {
    return (
      <div>
        {item?.name}:{item?.age}
      </div>
    );
  };

  return (
    <YourComponent
      itemHeight={50}
      occupied={145}
      ItemComponent={item}
      data={people}
      endReached={() => console.log("End reached")}
    />
  );
}

export default Test;

Props

Prop	Type	Required?	Default	Description
itemHeight	Number	✓	-	The height of each child item in pixels
occupied	Number	✓	-	The remaining empty space of a viewport in pixels
ItemComponent	Component	✓	-	The rendered of each item of the data
data	Array	✓	-	The data passed to the component
endReached	Function	✗	-	A callback function which gets called when the scrollbar(if exists) hits the bottom of the container