Scroll Infinitely is a lightweight and easy-to-use library that allows you to create infinite scrolling pages with ease. It is built with TypeScript and has no dependencies.

Table of contents

• Documentation
• Features
• Installation
• Usage
• Contributing
• License

Documentation

You can find the full documentation here.

A website with the documentation is coming soon...

Features

• Lightweight: The library is very lightweight and has no dependencies.
• Easy to use: The library is very easy to use and has a simple API.
• Customizable: You can customize the library to fit your needs.
• Built with TypeScript: The library is built with TypeScript and has type definitions.
• Inverse scrolling: You can also use inverse scrolling with the library.

Installation

To use Scroll Infinitely, all you need to do is install the scroll-infinitely package.

# Using npm
npm install scroll-infinitely

# Using yarn
yarn add scroll-infinitely

# Using pnpm
pnpm add scroll-infinitely

Usage

Here is a simple example of how you can use Scroll Infinitely:

import { useState } from 'react'
import { ScrollInfinitely } from '../../dist'

function App() {
  const [state, setState] = useState<number[]>(
    Array.from({ length: 100 }, (_, i) => i + 1)
  )

  const handleAction = () => {
    setState(prev => [
      ...prev,
      ...Array.from({ length: 100 }, (_, i) => i + prev.length + 1)
    ])
  }

  return (
    <ScrollInfinitely
      action={handleAction}
      hasMore={state.length < 1000}
      loader={<div>LOADING</div>}
    >
      {state.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </ScrollInfinitely>
  )
}

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

License

Scroll Infinitely is licensed under the MIT License.