A simple, zero-dependency and awesome React Infinite ♾ Scrolling Component based on Intersection Observer API. Works perfectly fine with almost null-hassle and lets you implement infinite scrolling in your web app on the fly! Powered by Vite.js ⚡

⬇ Installation

// using npm
npm i sodium-infinite-scroller

//or you prefer yarn
yarn add sodium-infinite-scroller

🏄‍♂️ Usage

Importing the package

// in ES6
import InfiniteScroll from "sodium-infinite-scroller";
// or commonjs
var InfiniteScroll = require("sodium-infinite-scroller");

Using the Infinite Scroll Component

<InfiniteScroll
  dataLength={images.length}
  hasMore={hasMore}
  loadMore={getMoreImages}
  loader={<Loader />}
  threshold={VISIBILITY_THRESHOLD}
>
  {contentToBeInfinitelyScrolled}
</InfiniteScroll>

Prop Definition

| prop | type | description | | ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | dataLength | number | Denotes the length of the data which is loaded on every call loadMore() function call. | | hasMore | bool | Denotes if there is more data to be loaded. | | loadMore | function | Takes the function that is to be called to fetch more data for infinite scrolling. | | threshold | number | Denotes the visibility threshold value of the element that is being observed by the Intersection Observer API. The Value is between 0 and 1; and it represents the percentage of the element visible. | | loader | node | Takes a Node Element(can be a simple HTML element node or even a React Component) to represent the loading state. | | endContent | node | Takes a Node Element(can be a simple HTML element node or even a React Component) to show the end content when data is loaded. | | children | node (list) | The Data Items on while you want to enable infinite scrolling functionality. |

🛠️ Spinning Up Development Environment

1. Clone the repository

git clone https://github.com/sohamsshah/sodium-infinite-scroller.git

2. Change the working directory

cd sodium-infinite-scroller

3. Install dependencies

yarn

5. Test working of the package

yarn run dev

You are all set! Open localhost:3000 to see the app.

6. Make changes and build the package

yarn build

Check if the build is successful and raise a PR with the proposed changes.

💖 We love Contributions

• Sodium Infinite Scroller is truly Open Source. Any sort of contribution to this project are highly appreciated. Create a branch, add commits, and open a pull request.

• Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to Sodium Infinite Scroller.

🛡️ License

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

👨‍💻 Author

👤 Soham Shah

• Twitter: @sohamsshah_
• Github: @sohamsshah
• Hashnode: @sohamsshah
• LinkedIN: @sohamshah456

O Stargazer✨! Can you ⭐️ this too?