React Scrollify Kit

A lightweight, performant React library for implementing infinite scrolling with TypeScript support.

Features

• 🚀 Performant: Uses Intersection Observer API for optimal performance
• 📱 Responsive: Works on all screen sizes and devices
• 🔄 Bidirectional: Supports both normal and reverse scrolling
• 💪 TypeScript: Full TypeScript support with proper type definitions
• 🎨 Customizable: Highly customizable with CSS and style props
• 🪝 Hook-based: Includes a React hook for custom implementations
• 📦 Lightweight: Minimal dependencies and small bundle size
• 🎯 Generic: Works with any data type with TypeScript generics

Installation

npm install react-scrollify-kit

yarn add react-scrollify-kit

pnpm add react-scrollify-kit

Quick Start

Basic Infinite Scroll

import React, { useState, useCallback } from "react";
import { InfiniteScroll } from "react-scrollify-kit";

const MyComponent = () => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const loadMore = useCallback(async () => {
    setLoading(true);
    try {
      // Fetch your data
      const newItems = await fetchItems();
      setItems((prev) => [...prev, ...newItems]);
      setHasMore(newItems.length > 0);
    } finally {
      setLoading(false);
    }
  }, []);

  return (
    <InfiniteScroll
      data={items}
      renderItem={(item, index) => <div key={item.id}>{item.title}</div>}
      onLoadMore={loadMore}
      hasMore={hasMore}
      loading={loading}
    />
  );
};

Using the Hook

For advanced use cases, you can use the useInfiniteScroll hook directly:

import React from "react";
import { useInfiniteScroll } from "react-scrollify-kit";

const CustomComponent = () => {
  const { targetRef } = useInfiniteScroll({
    hasMore: true,
    loading: false,
    onLoadMore: () => console.log("Load more!"),
    threshold: 0.8,
    rootMargin: "100px",
  });

  return (
    <div>
      {/* Your content */}
      <div ref={targetRef} />
    </div>
  );
};

API Reference

InfiniteScroll Props

| Prop | Type | Required | Default | Description | | -------------- | ---------------------------------------------- | -------- | --------------- | ------------------------------------------------ | | data | T[] | ✅ | - | Array of items to render | | renderItem | (item: T, index: number) => ReactNode | ✅ | - | Function to render each item | | onLoadMore | () => void | ✅ | - | Function called when more items should be loaded | | hasMore | boolean | ✅ | - | Whether there are more items to load | | loading | boolean | ❌ | false | Whether loading is in progress | | loader | ReactNode | ❌ | Default spinner | Custom loading component | | className | string | ❌ | - | CSS class name | | style | CSSProperties | ❌ | - | Inline styles | | threshold | number | ❌ | 1.0 | Intersection threshold (0-1) | | rootMargin | string | ❌ | "0px" | Root margin for intersection observer | | keyExtractor | (item: T, index: number) => string \| number | ❌ | - | Function to extract unique keys | | endMessage | ReactNode | ❌ | - | Message shown when all items are loaded | | reverse | boolean | ❌ | false | Enable reverse scrolling |

useInfiniteScroll Hook

const { targetRef } = useInfiniteScroll({
  hasMore: boolean;
  loading?: boolean;
  onLoadMore: () => void;
  threshold?: number;
  rootMargin?: string;
  reverse?: boolean;
});

Browser Support

• Chrome ≥ 58
• Firefox ≥ 55
• Safari ≥ 12.1
• Edge ≥ 79

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT