💤 @ehsaneha/react-lazy-load

A lightweight React utility that triggers a callback when an element enters the viewport, with optional polling and one-time execution support.

✨ Features

• ✅ Triggers callback when element comes into view
• 🔁 Optional polling via interval
• 🔂 One-time execution mode
• ⚙️ Fully configurable via props
• 📦 Includes both a useLazyLoad hook and a LazyLoad component
• 🧩 Built on top of @ehsaneha/react-inview and @ehsaneha/react-slot

📦 Installation

npm install @ehsaneha/react-lazy-load

or

yarn install @ehsaneha/react-lazy-load

🔧 Usage

✅ Basic Usage (Component)

import LazyLoad from "./LazyLoad";

<LazyLoad callback={() => console.log("Visible!")}>
  <div>Load more content when I appear</div>
</LazyLoad>;

🔁 With Polling

<LazyLoad callback={fetchData} intervalMs={10000}>
  <div>Fetching data every 10s while visible</div>
</LazyLoad>

☝️ Trigger Once

<LazyLoad callback={loadOnce} once>
  <div>Only triggers once when visible</div>
</LazyLoad>

🧠 useLazyLoad Hook

Use the hook directly for custom integration:

const ref = useLazyLoad(fetchData, {
  once: true,
  intervalMs: 5000,
});

return <div ref={ref}>Custom lazy load behavior</div>;

🧩 Props

LazyLoadProps

| Prop | Type | Default | Description | | ------------- | --------------------- | ------- | ---------------------------------------------------------------------------- | | callback | () => Promise<any> | — | Function to invoke when the element is in view. | | once | boolean | false | If true, callback runs only once. | | intervalMs | number | 5000 | Interval in ms for polling while visible. | | inViewProps | InViewOptionalProps | — | Props passed to the useInViewStateless hook (e.g., threshold, rootMargin). |

You can also pass any valid HTML attributes (e.g., className, style) to the LazyLoad component.

🧑‍💻 Author

Built by @ehsaneha

License

This package is licensed under the MIT License. See LICENSE for more information.

Feel free to modify or contribute to this package!