nikhilhuh-infinite-scroll

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

🙏 Mentor / Guidance

Debasish Sahoo

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:

npm install nikhilhuh-infinite-scroll

Usage

Example with children

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

import InfiniteScroll from "nikhilhuh-infinite-scroll";

function App() {
  const words = ["React", "Vue", "Angular", "Svelte"];

  return <InfiniteScroll items={words} />;
}

Example with images (items)

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

Example with Props

<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