nikhilhuh-infinite-scroll
Version:
A simple customizable infinite scroll wrapper for React
219 lines (182 loc) • 5.7 kB
Markdown
# nikhilhuh-infinite-scroll
[](https://www.npmjs.com/package/nikhilhuh-infinite-scroll)
[](https://www.npmjs.com/package/nikhilhuh-infinite-scroll)
[](LICENSE)
A lightweight and customizable infinite scrolling component for React.
Easily create smooth, continuous horizontal scrolling carousels with support for text, images, or any custom content.
---
## 👨💻 Author
**Nikhil Tiwari**
[](https://github.com/nikhilhuh)
---
## 🙏 Mentor / Guidance
**Debasish Sahoo**
[](https://github.com/debasishsahoo)
---
## Features
- 🚀 Simple and lightweight
- 🎨 Supports children or items array
- 🔁 Smooth infinite scrolling without flicker
- ⏸️ Pause on hover
- ↔️ Scroll in both directions (left or right)
- 🎯 Configurable gap and repeat
- ⚡ Built with TypeScript
---
## Installation
You can install the package using npm:
```bash
npm install nikhilhuh-infinite-scroll
```
---
## Usage
## Example with children
```tsx
import InfiniteScroll from "nikhilhuh-infinite-scroll";
function App() {
return (
<InfiniteScroll duration={25} pauseOnHover>
<p>🚀 Infinite Scroll is awesome!</p>
<p>✨ Smooth and lightweight</p>
<p>⚡ Built with TypeScript</p>
</InfiniteScroll>
);
}
```
## Example with items
```tsx
import InfiniteScroll from "nikhilhuh-infinite-scroll";
function App() {
const words = ["React", "Vue", "Angular", "Svelte"];
return <InfiniteScroll items={words} />;
}
```
## Example with images (items)
```tsx
import InfiniteScroll from "nikhilhuh-infinite-scroll";
function App() {
const images = [
"https://picsum.photos/id/1015/200/150",
"https://picsum.photos/id/1025/200/150",
"https://picsum.photos/id/1035/200/150",
"https://picsum.photos/id/1045/200/150",
];
return (
<InfiniteScroll
items={images}
type="image"
height={150}
duration={25}
pauseOnHover
repeat={2}
/>
);
}
```
---
## Props
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>duration</code></td>
<td><code>number</code></td>
<td><code>30</code></td>
<td>Controls the duration of the animation (higher duration = slower animation).</td>
</tr>
<tr>
<td><code>direction</code></td>
<td><code>"left"</code> | <code>"right"</code></td>
<td><code>"left"</code></td>
<td>Sets the scroll direction.</td>
</tr>
<tr>
<td><code>pauseOnHover</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>Pauses scrolling when hovered.</td>
</tr>
<tr>
<td><code>className</code></td>
<td><code>string</code></td>
<td><code>""</code></td>
<td>Add custom class names for styling.</td>
</tr>
<tr>
<td><code>style</code></td>
<td><code>React.CSSProperties</code></td>
<td><code>{}</code></td>
<td>Inline styles for the container.</td>
</tr>
<tr>
<td><code>items</code></td>
<td><code>string[]</code></td>
<td><code>[]</code></td>
<td>Array of items to be displayed in the scroll. Can be strings or image URLs</td>
</tr>
<tr>
<td><code>type</code></td>
<td><code>"text"</code> | <code>"image"</code></td>
<td><code>"text"</code></td>
<td>Defines how the items are rendered. <code>"text"</code> displays strings, <code>"image"</code> treats items as image URLs and applies default styling.</td>
</tr>
<tr>
<td><code>children</code></td>
<td><code>React.ReactNode</code></td>
<td><code>null</code></td>
<td>Custom JSX elements to render inside the scroll instead of using <code>items</code>.</td>
</tr>
<tr>
<td><code>height</code></td>
<td><code>string</code></td>
<td><code>"auto"</code></td>
<td>Height of the scroll container (e.g., <code>"300px"</code>, <code>"100vh"</code>).</td>
</tr>
<tr>
<td><code>width</code></td>
<td><code>string</code></td>
<td><code>"100%"</code></td>
<td>Width of the scroll container (e.g., <code>"500px"</code>, <code>"100%"</code>).</td>
</tr>
<tr>
<td><code>gap</code></td>
<td><code>string</code></td>
<td><code>"2rem"</code></td>
<td>Space between consecutive items inside the scroll (e.g., <code>"10px"</code>, <code>"1rem"</code>).</td>
</tr>
<tr>
<td><code>repeat</code></td>
<td><code>number</code></td>
<td><code>2</code></td>
<td>Number of times the items are duplicated for continuous scrolling.</td>
</tr>
</tbody>
</table>
---
## Example with Props
```tsx
<InfiniteScroll
duration={20}
direction="right"
pauseOnHover={false}
className="my-scroll"
height="250px"
width="100%"
gap="3rem"
repeat={3}
style={{ background: "#f9f9f9", border: "1px solid #ddd" }}
>
<p>🚀 Infinite Scroll is awesome!</p>
<p>✨ Smooth and lightweight</p>
<p>⚡ Built with TypeScript</p>
</InfiniteScroll>
```
---
## License
MIT © 2025 Nikhil Tiwari