react-lazy-img-observer 1.0.1 → 1.1.1

package/LICENCE.md

@@ -1,21 +1,21 @@
-ISC License (ISC)
+MIT License
 
 Copyright (c) 2023 Percy Saul Rondan Chuzon
 
-Se concede permiso, de forma gratuita, a cualquier persona que obtenga una copia
-de este software y de los archivos de documentación asociados (el "Software"),
-para tratar el Software sin restricción, incluidos, entre otros, los derechos de
-uso, copia, modificación, fusión, publicación, distribución, sublicencia y/o
-venta de copias del Software y para permitir a las personas a las que se les
-proporcione el Software a hacerlo, sujeto a las siguientes condiciones:
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-El aviso de copyright anterior y este aviso de permisos se incluirán en todas
-las copias o partes sustanciales del Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
-EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O
-IMPLÍCITA, INCLUYENDO PERO NO LIMITADO A LAS GARANTÍAS DE COMERCIABILIDAD,
-IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS
-AUTORES O TITULARES DE DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGUNA
-RECLAMACIÓN, DAÑO U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN DE CONTRATO,
-AGRAVIO O DE OTRO MODO, DERIVADA DE, FUERA DE O EN CONEXIÓN CON EL SOFTWARE
-O EL USO U OTROS TRATOS EN EL SOFTWARE.
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,125 +1,112 @@
-# ImageLazy Component
-
-The `ImageLazy` component is a React component designed for lazy loading images. It leverages the Intersection Observer API to load images only when they are within the viewport, optimizing the loading performance of your web application.
-
-## Installation
-
-```bash
-npm install react-lazy-img-observer
-```
-
-# Usage
-
-```javascript
-import ImageLazy from "react-lazy-img-observer";
-
-const Example = () => {
-  return (
-    <ImageLazy
-      src="path/to/your/image.jpg"
-      alt="Description of the image"
-      width={600}
-      height={400}
-      className="your-class-name"
-      id="unique-image-id"
-      title="Image Title"
-      extraData={{ "data-custom-attribute": "value" }}
-    />
-  );
-};
-```
-
-## Props
-
-The ImageLazy component accepts the following props:
-
-| Prop        | Type                                        | Default | Description                                         |
-| ----------- | ------------------------------------------- | ------- | --------------------------------------------------- |
-| `src`       | `string`                                    | -       | The source URL of the image.                        |
-| `alt`       | `string`                                    | -       | The alt text for the image.                         |
-| `width`     | `number`                                    | -       | The width of the image.                             |
-| `height`    | `number`                                    | -       | The height of the image.                            |
-| `id`        | `number \| string`                          | -       | The ID of the image element.                        |
-| `className` | `string`                                    | -       | Additional class names for the image element.       |
-| `title`     | `string`                                    | -       | The title attribute for the image element.          |
-| `extraData` | `React.ImgHTMLAttributes<HTMLImageElement>` | -       | Additional attributes to pass to the image element. |
-
-
-## Example 
-
-```javascript
-import React from 'react';
-import ImageLazy from 'your-library-name';
-
-const App = () => {
-  return (
-    <div>
-      <h1>Lazy Loaded Images</h1>
-      <ImageLazy
-        src="https://example.com/image1.jpg"
-        alt="Image 1"
-        width={600}
-        height={400}
-        className="image-class"
-        id="image1"
-        title="First Image"
-      />
-      <ImageLazy
-        src="https://example.com/image2.jpg"
-        alt="Image 2"
-        width={600}
-        height={400}
-        className="image-class"
-        id="image2"
-        title="Second Image"
-      />
-    </div>
-  );
-};
-
-export default App;
-
-```
-
-## How it works
-
-The `ImageLazy` component uses the IntersectionObserver API to detect when the image enters the viewport. When the image is about to enter the viewport (50% visibility by default), the component sets the `src` attribute of the image element to load the actual image.
-
-## Intersection Observer Options
-
-- **`root`**: The element that is used as the viewport for checking visibility of the target. Defaults to `null` (the browser viewport).
-- **`rootMargin`**: Margin around the root. Can be used to grow or shrink the area used for intersection. Defaults to `"0px"`.
-- **`threshold`**: A single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. Defaults to `0.5`.
-
-
-## Styling
-
-The `ImageLazy` component applies a blur filter to the image until it is fully loaded. You can customize the transition effect and blur amount through the `style` prop or CSS class.
-
-```css
-.image-class {
-  filter: blur(10px);
-  transition: filter 0.9s;
-}
-
-.image-class[data-src] {
-  filter: none;
-}
-
-```
-
-## License
-
-MIT
-
-## Contributing
-
-Contributions are welcome! Please open an issue or submit a pull request for any bugs or feature requests.
-
-## Author
-
-Percy Chuzon
-
-## Acknowledgments
-
-Thanks to the React and Intersection Observer API documentation for guidance.
+# 📷 ImageLazy
+
+**ImageLazy** is a lightweight React component for lazy loading images using the Intersection Observer API. It delays the loading of off-screen images until they appear in the viewport, helping optimize performance and reduce initial load times.
+
+![npm](https://img.shields.io/npm/v/react-lazy-img-observer.svg)  
+![license](https://img.shields.io/npm/l/react-lazy-img-observer.svg)
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-lazy-img-observer
+```
+
+---
+
+## 🚀 Usage
+
+### Basic example (JSX or TSX)
+
+```tsx
+import ImageLazy from "react-lazy-img-observer";
+
+const Example = () => (
+  <ImageLazy
+    src="https://example.com/image.jpg"
+    alt="Description of the image"
+    width={600}
+    height={400}
+    className="custom-class"
+    id="image-1"
+    title="Image title"
+    extraData={{ "data-custom": "value" }}
+  />
+);
+```
+
+---
+
+## 🧩 Props
+
+| Prop        | Type                                        | Required | Description                                           |
+|-------------|---------------------------------------------|----------|-------------------------------------------------------|
+| `src`       | `string`                                    | ✅        | The source URL of the image.                          |
+| `alt`       | `string`                                    | ✅        | The alt text for accessibility.                       |
+| `width`     | `number`                                    | ❌        | The width of the image.                               |
+| `height`    | `number`                                    | ❌        | The height of the image.                              |
+| `id`        | `string \| number`                          | ❌        | Optional ID for the image element.                    |
+| `className` | `string`                                    | ❌        | CSS class for custom styling.                         |
+| `title`     | `string`                                    | ❌        | Tooltip text shown on hover.                          |
+| `extraData` | `React.ImgHTMLAttributes<HTMLImageElement>` | ❌        | Any extra HTML attributes (e.g., `data-*`).           |
+
+---
+
+## 📚 How It Works
+
+The component uses the [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API to detect when the image enters the viewport. Once at least **50%** of the image is visible, the real `src` is assigned to the image, triggering the browser to load it.
+
+---
+
+## ⚙️ Intersection Observer Configuration
+
+- `root`: `null` (default viewport)
+- `rootMargin`: `"0px"`
+- `threshold`: `0.5` (50% visibility required)
+
+---
+
+## 🎨 Styling
+
+The image starts blurred and transitions smoothly once it’s loaded. You can override or enhance this with your own styles:
+
+```css
+.custom-class {
+  filter: blur(20px);
+  transition: filter 0.9s ease;
+}
+
+.custom-class.loaded {
+  filter: none;
+}
+```
+
+You may also override the `style` prop directly if preferred.
+
+---
+
+## 📄 License
+
+[ISC License](./LICENSE)
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome!  
+Feel free to [open an issue](https://github.com/perch33/react-lazy-img-observer/issues) or submit a pull request.
+
+---
+
+## 👤 Author
+
+**Percy Chuzon**  
+📧 contacto@percychuzon.com  
+🌐 [https://percychuzon.com](https://percychuzon.com)
+
+---
+
+## 🙏 Acknowledgments
+
+Thanks to the React community and the MDN docs for inspiration and guidance.

package/dist/cjs/ImageLazy.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageLazy = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, }) => {
     const imageRef = (0, react_1.useRef)(null);
     const [isIntersecting, setIsIntersecting] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
+        if (typeof IntersectionObserver === "undefined" ||
+            !imageRef.current) {
+            return;
+        }
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
@@ -16,19 +21,20 @@ const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, }
                     observer.unobserve(entry.target);
                 }
             });
-        }, { root: null, rootMargin: "0px", threshold: 0.5 });
-        if (imageRef.current) {
-            observer.observe(imageRef.current);
-        }
+        }, {
+            root: null,
+            rootMargin: "0px",
+            threshold: 0.5,
+        });
+        observer.observe(imageRef.current);
         return () => {
-            if (imageRef.current) {
-                observer.unobserve(imageRef.current);
-            }
+            observer.disconnect();
         };
     }, [src]);
-    return ((0, jsx_runtime_1.jsx)("img", { title: title, className: className, loading: "lazy", ref: imageRef, "data-src": src, alt: alt, width: width, height: height, style: {
+    return ((0, jsx_runtime_1.jsx)("img", { ref: imageRef, "data-src": src, alt: alt, title: title, className: className, width: width, height: height, loading: "lazy", id: id?.toString(), style: {
             filter: isIntersecting ? "none" : "blur(20px)",
             transition: "filter 0.9s",
-        }, id: id?.toString(), ...extraData }));
+        }, ...extraData }));
 };
+exports.ImageLazy = ImageLazy;
 exports.default = ImageLazy;

package/dist/cjs/ImageLazy.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ImageLazy=({src:e,alt:t,width:r,height:s,className:a,id:n,extraData:c,title:i})=>{const u=(0,react_1.useRef)(null),[o,l]=(0,react_1.useState)(!1);return(0,react_1.useEffect)((()=>{const e=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(l(!0),u.current&&(u.current.src=u.current.dataset.src||""),e.unobserve(t.target))}))}),{root:null,rootMargin:"0px",threshold:.5});return u.current&&e.observe(u.current),()=>{u.current&&e.unobserve(u.current)}}),[e]),(0,jsx_runtime_1.jsx)("img",{title:i,className:a,loading:"lazy",ref:u,"data-src":e,alt:t,width:r,height:s,style:{filter:o?"none":"blur(20px)",transition:"filter 0.9s"},id:n?.toString(),...c})};exports.default=ImageLazy;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageLazy=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ImageLazy=({src:e,alt:t,width:r,height:s,className:a,id:n,extraData:i,title:c})=>{const o=(0,react_1.useRef)(null),[u,l]=(0,react_1.useState)(!1);return(0,react_1.useEffect)((()=>{if("undefined"==typeof IntersectionObserver||!o.current)return;const e=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(l(!0),o.current&&(o.current.src=o.current.dataset.src||""),e.unobserve(t.target))}))}),{root:null,rootMargin:"0px",threshold:.5});return e.observe(o.current),()=>{e.disconnect()}}),[e]),(0,jsx_runtime_1.jsx)("img",{ref:o,"data-src":e,alt:t,title:c,className:a,width:r,height:s,loading:"lazy",id:n?.toString(),style:{filter:u?"none":"blur(20px)",transition:"filter 0.9s"},...i})};exports.ImageLazy=ImageLazy,exports.default=ImageLazy;

package/dist/esm/ImageLazy.js

@@ -4,6 +4,10 @@ const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, }
     const imageRef = useRef(null);
     const [isIntersecting, setIsIntersecting] = useState(false);
     useEffect(() => {
+        if (typeof IntersectionObserver === "undefined" ||
+            !imageRef.current) {
+            return;
+        }
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
@@ -14,19 +18,20 @@ const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, }
                     observer.unobserve(entry.target);
                 }
             });
-        }, { root: null, rootMargin: "0px", threshold: 0.5 });
-        if (imageRef.current) {
-            observer.observe(imageRef.current);
-        }
+        }, {
+            root: null,
+            rootMargin: "0px",
+            threshold: 0.5,
+        });
+        observer.observe(imageRef.current);
         return () => {
-            if (imageRef.current) {
-                observer.unobserve(imageRef.current);
-            }
+            observer.disconnect();
         };
     }, [src]);
-    return (_jsx("img", { title: title, className: className, loading: "lazy", ref: imageRef, "data-src": src, alt: alt, width: width, height: height, style: {
+    return (_jsx("img", { ref: imageRef, "data-src": src, alt: alt, title: title, className: className, width: width, height: height, loading: "lazy", id: id?.toString(), style: {
             filter: isIntersecting ? "none" : "blur(20px)",
             transition: "filter 0.9s",
-        }, id: id?.toString(), ...extraData }));
+        }, ...extraData }));
 };
 export default ImageLazy;
+export { ImageLazy };

package/dist/esm/ImageLazy.min.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useRef,useState}from"react";const ImageLazy=({src:e,alt:t,width:r,height:s,className:a,id:n,extraData:c,title:i})=>{const o=useRef(null),[u,l]=useState(!1);return useEffect((()=>{const e=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(l(!0),o.current&&(o.current.src=o.current.dataset.src||""),e.unobserve(t.target))}))}),{root:null,rootMargin:"0px",threshold:.5});return o.current&&e.observe(o.current),()=>{o.current&&e.unobserve(o.current)}}),[e]),_jsx("img",{title:i,className:a,loading:"lazy",ref:o,"data-src":e,alt:t,width:r,height:s,style:{filter:u?"none":"blur(20px)",transition:"filter 0.9s"},id:n?.toString(),...c})};export default ImageLazy;
+import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useRef,useState}from"react";const ImageLazy=({src:e,alt:t,width:r,height:s,className:n,id:a,extraData:i,title:o})=>{const c=useRef(null),[u,l]=useState(!1);return useEffect((()=>{if("undefined"==typeof IntersectionObserver||!c.current)return;const e=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(l(!0),c.current&&(c.current.src=c.current.dataset.src||""),e.unobserve(t.target))}))}),{root:null,rootMargin:"0px",threshold:.5});return e.observe(c.current),()=>{e.disconnect()}}),[e]),_jsx("img",{ref:c,"data-src":e,alt:t,title:o,className:n,width:r,height:s,loading:"lazy",id:a?.toString(),style:{filter:u?"none":"blur(20px)",transition:"filter 0.9s"},...i})};export default ImageLazy;export{ImageLazy};

package/dist/types/ImageLazy.d.ts

@@ -10,3 +10,4 @@ type ImagesLazy = {
 };
 declare const ImageLazy: ({ src, alt, width, height, className, id, extraData, title, }: ImagesLazy) => import("react/jsx-runtime").JSX.Element;
 export default ImageLazy;
+export { ImageLazy };

package/package.json

@@ -1,37 +1,67 @@
 {
   "name": "react-lazy-img-observer",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "A React component for lazy loading images with Intersection Observer",
   "main": "dist/cjs/ImageLazy.min.js",
   "module": "dist/esm/ImageLazy.min.js",
   "types": "dist/types/ImageLazy.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/ImageLazy.min.js",
+      "require": "./dist/cjs/ImageLazy.min.js",
+      "types": "./dist/types/ImageLazy.d.ts"
+    }
+  },
+  "files": [
+    "dist/cjs",
+    "dist/esm",
+    "dist/types"
+  ],
+  "sideEffects": false,
   "scripts": {
-    "build": "tsc --project tsconfig.cjs.json && tsc --project tsconfig.esm.json && terser dist/cjs/ImageLazy.js -o dist/cjs/ImageLazy.min.js --compress --mangle && terser dist/esm/ImageLazy.js -o dist/esm/ImageLazy.min.js --compress --mangle"
+    "clean": "rimraf dist",
+    "build": "npm run clean && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && terser dist/cjs/ImageLazy.js -o dist/cjs/ImageLazy.min.js --compress --mangle && terser dist/esm/ImageLazy.js -o dist/esm/ImageLazy.min.js --compress --mangle"
   },
   "keywords": [
     "react",
     "lazy-load",
+    "lazyload",
     "image",
-    "intersection-observer"
+    "lazy-image",
+    "intersection-observer",
+    "performance",
+    "react-component",
+    "react-images",
+    "react-lazy",
+    "load-on-scroll",
+    "responsive-images",
+    "web-optimization",
+    "accessibility",
+    "a11y",
+    "react-hooks",
+    "viewport"
   ],
   "author": "Percy Chuzon <contacto@percychuzon.com>",
-  "license": "ISC",
-  "homepage": "https://github.com/perch33/react-lazy-img-observer",
+  "license": "MIT",
+  "homepage": "https://imagelazy.percychuzon.com/",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/perch33/react-lazy-img-observer.git"
+    "url": "https://github.com/perch33/react-lazy-img-observer.git"
   },
   "bugs": {
     "url": "https://github.com/perch33/react-lazy-img-observer/issues"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "terser": "^5.31.3"
+    "terser": "^5.39.2"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "typescript": "^5.5.4"
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.7",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.8.3"
   }
 }

package/src/ImageLazy.tsx

@@ -1,74 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-type ImagesLazy = {
-  src: string;
-  alt: string;
-  width?: number;
-  height?: number;
-  id?: number | string;
-  className?: string;
-  title?: string;
-  extraData?: React.ImgHTMLAttributes<HTMLImageElement>;
-};
-
-const ImageLazy = ({
-  src,
-  alt,
-  width,
-  height,
-  className,
-  id,
-  extraData,
-  title,
-}: ImagesLazy) => {
-  const imageRef = useRef<HTMLImageElement>(null);
-  const [isIntersecting, setIsIntersecting] = useState<boolean>(false);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setIsIntersecting(true);
-            if (imageRef.current) {
-              imageRef.current.src = imageRef.current.dataset.src || "";
-            }
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      { root: null, rootMargin: "0px", threshold: 0.5 }
-    );
-
-    if (imageRef.current) {
-      observer.observe(imageRef.current);
-    }
-
-    return () => {
-      if (imageRef.current) {
-        observer.unobserve(imageRef.current);
-      }
-    };
-  }, [src]);
-
-  return (
-    <img
-      title={title}
-      className={className}
-      loading="lazy"
-      ref={imageRef}
-      data-src={src}
-      alt={alt}
-      width={width}
-      height={height}
-      style={{
-        filter: isIntersecting ? "none" : "blur(20px)",
-        transition: "filter 0.9s",
-      }}
-      id={id?.toString()}
-      {...extraData}
-    />
-  );
-};
-
-export default ImageLazy;

package/tsconfig.cjs.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "CommonJS",
-    "outDir": "dist/cjs"
-  }
-}

package/tsconfig.esm.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "ESNext",
-    "outDir": "dist/esm"
-  }
-}

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-    "compilerOptions": {
-      "target": "ES2020",
-      "module": "ESNext",
-      "declaration": true,
-      "jsx": "react-jsx",
-      "declarationDir": "dist/types",
-      "removeComments": true,
-      "strict": true,
-      "esModuleInterop": true,
-      "skipLibCheck": true,
-      "forceConsistentCasingInFileNames": true,
-      "outDir": "dist",
-      "moduleResolution": "node"
-  
-    },
-    "include": ["src"],
-    "exclude": ["node_modules"]
-  }