https://github.com/sohamsshah/sodium-infinite-scroller
A simple, zero-dependency and awesome React Infinite ♾ Scrolling Component based on Intersection Observer API. Powered by Vite.js ⚡
https://github.com/sohamsshah/sodium-infinite-scroller
infinite-scroll intersection-observer npm-package react-component vitejs
Last synced: about 1 year ago
JSON representation
A simple, zero-dependency and awesome React Infinite ♾ Scrolling Component based on Intersection Observer API. Powered by Vite.js ⚡
- Host: GitHub
- URL: https://github.com/sohamsshah/sodium-infinite-scroller
- Owner: sohamsshah
- License: mit
- Created: 2021-09-08T17:53:42.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-09-30T15:37:57.000Z (over 4 years ago)
- Last Synced: 2025-02-24T04:51:18.187Z (over 1 year ago)
- Topics: infinite-scroll, intersection-observer, npm-package, react-component, vitejs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/sodium-infinite-scroller
- Size: 78.1 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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**
```bash
// using npm
npm i sodium-infinite-scroller
//or you prefer yarn
yarn add sodium-infinite-scroller
```
## **🏄♂️ Usage**
### Importing the package
```jsx
// in ES6
import InfiniteScroll from "sodium-infinite-scroller";
// or commonjs
var InfiniteScroll = require("sodium-infinite-scroller");
```
### Using the Infinite Scroll Component
```jsx
}
threshold={VISIBILITY_THRESHOLD}
>
{contentToBeInfinitelyScrolled}
```
### 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
```bash
git clone https://github.com/sohamsshah/sodium-infinite-scroller.git
```
2. Change the working directory
```bash
cd sodium-infinite-scroller
```
3. Install dependencies
```bash
yarn
```
5. Test working of the package
```bash
yarn run dev
```
You are all set! Open [localhost:3000](http://localhost:3000/) to see the app.
6. Make changes and build the package
```bash
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](https://github.com/sohamsshah/sodium-infinite-scroller/compare).
- Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to **Sodium Infinite Scroller**.
## **🛡️ License**
This project is licensed under the MIT License - see the [`LICENSE`](LICENSE) file for details.
---
## **👨💻 Author**
### 👤 Soham Shah
- Twitter: [@sohamsshah\_](https://twitter.com/sohamsshah_)
- Github: [@sohamsshah](https://github.com/sohamsshah)
- Hashnode: [@sohamsshah](https://hashnode.com/@sohamsshah)
- LinkedIN: [@sohamshah456](https://www.linkedin.com/in/sohamshah456/)
---
Liked this npm package?
O Stargazer✨! Can you ⭐️ this too?