nikhilhuh-infinite-scroll

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

Prop	Type	Default	Description
duration	number	30	Controls the duration of the animation (higher duration = slower animation).
direction	"left" | "right"	"left"	Sets the scroll direction.
pauseOnHover	boolean	false	Pauses scrolling when hovered.
className	string	""	Add custom class names for styling.
style	React.CSSProperties	{}	Inline styles for the container.
items	string[]	[]	Array of items to be displayed in the scroll. Can be strings or image URLs
type	"text" | "image"	"text"	Defines how the items are rendered. "text" displays strings, "image" treats items as image URLs and applies default styling.
children	React.ReactNode	null	Custom JSX elements to render inside the scroll instead of using items.
height	string	"auto"	Height of the scroll container (e.g., "300px", "100vh").
width	string	"100%"	Width of the scroll container (e.g., "500px", "100%").
gap	string	"2rem"	Space between consecutive items inside the scroll (e.g., "10px", "1rem").
repeat	number	2	Number of times the items are duplicated for continuous scrolling.

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