tcs-react-virtualize-data

🚀 Effortlessly Render Large Datasets Without Slowing Down Your UI!

tcs-react-virtualize-data is a lightweight React library that renders only visible items, improving performance without affecting your UI. It works seamlessly with tables, grids, lists, and more.

🤔 Why Use tcs-react-virtualize-data?

• 🛠 Easy Integration – Simple setup with React.
• 🎨 Seamless Integration – Works with any existing design.
• 📋 Universal Support – Compatible with lists, tables, and grids.
• 🔄 Optimized Rendering – Reduces DOM updates for a smoother experience.
• 📊 High Performance – Build for Optimized for large datasets.

📦 Installation

Install the package via npm or yarn:

npm install tcs-react-virtualize-data
# or
yarn add tcs-react-virtualize-data

🚀 Usage

Import and use the hook in your React project:

import useVirtualizeData from "tcs-react-virtualize-data";
import { moviesData } from "./testData.tsx";
import { Waypoint } from "react-waypoint";
import YourItem from "./MovieItem.tsx";

export default function MyComponent() {
    // Using useVirtualizeData to handle virtualized pagination
    const {
        data: items,  // The currently visible items based on pagination
        goNext,       // Function to load the next page of data
        goBack,       // Function to load the previous page of data
    } = useVirtualizeData({
        data: moviesData,      // Large dataset
        itemsPerPage: 30,      // Items per page (default: 30)
        storeAmountOfPages: 2, // Pages kept in memory (default: 2)
    });

    return (
        <div>
            {/* Rendering virtualized items */}
            {items.map((value, index, array) => (
                <ItemWithReactWayPoint
                    key={value.id}
                    item={value}
                    onScrollButton={goNext}   // Triggered when scrolling down
                    onScrollTop={goBack}      // Triggered when scrolling up
                    haveWayPoint={index === 0 || index === array.length - 1}
                    // Add Waypoint to first & last items
                />
            ))}
        </div>
    );
}

/**
 * Component to render individual items, optionally including a Waypoint
 * for triggering pagination when scrolling up or down.
 */
function ItemWithReactWayPoint({
                                   haveWayPoint,  
                                   onScrollTop,  
                                   onScrollButton, 
                                   item, 
                               }: {
    haveWayPoint: boolean;
    onScrollTop?: () => void;
    onScrollButton?: () => void;
    item: any;
}) {
    if (haveWayPoint) {
        return (
            <Waypoint
                onEnter={(args) => {
                    // Load the next set of data when reaching the bottom
                    if (args.previousPosition === "below" && onScrollButton) {
                        onScrollButton();
                    }
                    // Load previous data when reaching the top
                    if (args.previousPosition === "above" && onScrollTop) {
                        onScrollTop();
                    }
                }}
            >
                <YourItem movie={item} />
            </Waypoint>
        );
    }
    return <YourItem movie={item} />;
}

⚙️ Props

| Prop | Type | Default | Required | Description | |----------------------|----------|---------|----------|----------------------------------------------------| | data | Array<any> | - | ✅ Yes | The list of items to be virtualized. | | itemsPerPage | number | 30 | ❌ No | Number of items to display per page. | | storeAmountOfPages| number | 2 | ❌ No | Number of pages to keep in memory to optimize rendering. |

📜 License

ISC License © Taing chheangseng

Made with ❤️ in Cambodia 🇰🇭

🚀 Contributions & Issues
Have a suggestion or found a bug? Feel free to open an issue or contribute!

Let me know if you need further tweaks! 🚀