🚀 @dev/get-on-scroll

A lightweight React component for infinite scroll loading with customizable scroll direction and loader.

📦 Installation

npm install @dev/get-on-scroll

or

yarn add @dev/get-on-scroll

🧠 Usage

import React, { useState } from "react";
import { SrollerContainer } from "@dev/get-on-scroll";

export default function App() {
  const [items, setItems] = useState(Array.from({ length: 10 }, (_, i) => i + 1));

  const loadMore = () => {
    setTimeout(() => {
      setItems((prev) => [
        ...prev,
        ...Array.from({ length: 10 }, (_, i) => prev.length + i + 1),
      ]);
    }, 1000); // simulate loading
  };

  return (
    <SrollerContainer direction="column" callback={loadMore}>
      {items.map((item) => (
        <div key={item} style={{ padding: "10px", border: "1px solid #ccc" }}>
          Item {item}
        </div>
      ))}
    </SrollerContainer>
  );
}

⚙️ Props

| Prop | Type | Required | Default | Description | |--------------|------------|----------|----------|---------------------------------------------| | callback | Function | ✅ Yes | — | Function triggered on reaching scroll end | | direction | string | ❌ No | "row" | Scroll direction: "row" or "column" | | children | ReactNode| ✅ Yes | — | Elements to render inside the scroll area |

🎯 Features

• 🌀 Infinite scroll support (horizontal or vertical)
• 🎛️ Easy configuration via props
• ⚡ Lightweight and fast
• 🧱 Works with any list/grid layout
• 🔄 Includes default spinner loader

🖼️ Screenshots

(Add a screenshot or GIF here if you have one for better visual presentation)

📁 Folder Structure (after build)

dist/
  ├── components/
  │   ├── DefaultLoader.js
  │   └── SrollerContainer.js
  ├── index.js
  └── main.js

💡 Best Practices

• Debounce callback if API call is expensive
• Use direction="column" for vertical scrolling lists
• Pass optimized child elements to reduce DOM updates

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you'd like to change.

📜 License

MIT

🔎 Keywords

"keywords": [
  "infinite-scroll",
  "react-scroll",
  "react-infinite-scroll",
  "scroll-loader",
  "lazy-load",
  "scroll",
  "react",
  "infinite-loader"
]

🧑‍💻 Author

Made with ❤️ by **Dev **

Feel free to open an issue or submit a PR!