Sodium Infinite Scroller ♾

sodium-infinite-scroller · Report Bug · Request Feature

---

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

---

Liked this npm package?

O Stargazer✨! Can you ⭐️ this too?