sodium-infinite-scroller v1.0.2
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
- Clone the repository
git clone https://github.com/sohamsshah/sodium-infinite-scroller.git- Change the working directory
cd sodium-infinite-scroller- Install dependencies
yarn- Test working of the package
yarn run devYou are all set! Open localhost:3000 to see the app.
- Make changes and build the package
yarn buildCheck 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
CONTRIBUTINGfor details on ourCODE 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?