💤 @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!