react-lazy-img-observer 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/LICENCE.md +16 -16
  2. package/README.md +29 -11
  3. package/dist/cjs/ImageLazy.js +4 -3
  4. package/dist/cjs/ImageLazy.min.js +1 -1
  5. package/dist/esm/ImageLazy.js +4 -3
  6. package/dist/esm/ImageLazy.min.js +1 -1
  7. package/dist/types/ImageLazy.d.ts +3 -1
  8. package/package.json +17 -4
package/LICENCE.md CHANGED
@@ -1,21 +1,21 @@
1
- ISC License (ISC)
1
+ MIT License
2
2
 
3
3
  Copyright (c) 2023 Percy Saul Rondan Chuzon
4
4
 
5
- Se concede permiso, de forma gratuita, a cualquier persona que obtenga una copia
6
- de este software y de los archivos de documentación asociados (el "Software"),
7
- para tratar el Software sin restricción, incluidos, entre otros, los derechos de
8
- uso, copia, modificación, fusión, publicación, distribución, sublicencia y/o
9
- venta de copias del Software y para permitir a las personas a las que se les
10
- proporcione el Software a hacerlo, sujeto a las siguientes condiciones:
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the “Software”), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
11
 
12
- El aviso de copyright anterior y este aviso de permisos se incluirán en todas
13
- las copias o partes sustanciales del Software.
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
14
 
15
- EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O
16
- IMPLÍCITA, INCLUYENDO PERO NO LIMITADO A LAS GARANTÍAS DE COMERCIABILIDAD,
17
- IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS
18
- AUTORES O TITULARES DE DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGUNA
19
- RECLAMACIÓN, DAÑO U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN DE CONTRATO,
20
- AGRAVIO O DE OTRO MODO, DERIVADA DE, FUERA DE O EN CONEXIÓN CON EL SOFTWARE
21
- O EL USO U OTROS TRATOS EN EL SOFTWARE.
15
+ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
package/README.md CHANGED
@@ -36,20 +36,38 @@ const Example = () => (
36
36
  );
37
37
  ```
38
38
 
39
+ 🆕 View Transitions (v1.1.0+)
40
+
41
+ You can now use `viewTransitionName` to enable smooth page or element transitions using the [`View Transitions API`](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API):
42
+
43
+ ```tsx
44
+ <ImageLazy
45
+ src="https://example.com/image.jpg"
46
+ alt="Description"
47
+ width={600}
48
+ height={400}
49
+ viewTransitionName="featured-image"
50
+ />
51
+ ```
52
+
53
+ >💡 To use this, make sure your project includes proper CSS setup for ::view-transition-* pseudo-elements and transition animations.
54
+
39
55
  ---
40
56
 
41
57
  ## 🧩 Props
42
58
 
43
- | Prop | Type | Required | Description |
44
- |-------------|---------------------------------------------|----------|-------------------------------------------------------|
45
- | `src` | `string` | ✅ | The source URL of the image. |
46
- | `alt` | `string` | ✅ | The alt text for accessibility. |
47
- | `width` | `number` | ❌ | The width of the image. |
48
- | `height` | `number` | ❌ | The height of the image. |
49
- | `id` | `string \| number` | ❌ | Optional ID for the image element. |
50
- | `className` | `string` | ❌ | CSS class for custom styling. |
51
- | `title` | `string` | ❌ | Tooltip text shown on hover. |
52
- | `extraData` | `React.ImgHTMLAttributes<HTMLImageElement>` | ❌ | Any extra HTML attributes (e.g., `data-*`). |
59
+ | Prop | Type | Required | Description |
60
+ | ----------- | ------------------------------------------- | -------- | ------------------------------------------- |
61
+ | `src` | `string` | ✅ | The source URL of the image. |
62
+ | `alt` | `string` | ✅ | The alt text for accessibility. |
63
+ | `width` | `number` | ❌ | The width of the image. |
64
+ | `height` | `number` | ❌ | The height of the image. |
65
+ | `id` | `string \| number` | ❌ | Optional ID for the image element. |
66
+ | `className` | `string` | ❌ | CSS class for custom styling. |
67
+ | `title` | `string` | ❌ | Tooltip text shown on hover. |
68
+ | `extraData` | `React.ImgHTMLAttributes<HTMLImageElement>` | ❌ | Any extra HTML attributes (e.g., `data-*`). |
69
+ | `style` | `React.CSSProperties` | ❌ | Inline style object for additional customization. |
70
+ | `viewTransitionName` | `string` | ❌ | Enables smooth visual transitions between views using View Transitions API. |
53
71
 
54
72
  ---
55
73
 
@@ -109,4 +127,4 @@ Feel free to [open an issue](https://github.com/perch33/react-lazy-img-observer/
109
127
 
110
128
  ## 🙏 Acknowledgments
111
129
 
112
- Thanks to the React community and the MDN docs for inspiration and guidance.
130
+ Thanks to the React community and the MDN docs for inspiration and guidance.
package/dist/cjs/ImageLazy.js CHANGED
@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.ImageLazy = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
- const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, }) => {
6
+ const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, viewTransitionName, style, }) => {
7
7
  const imageRef = (0, react_1.useRef)(null);
8
8
  const [isIntersecting, setIsIntersecting] = (0, react_1.useState)(false);
9
9
  (0, react_1.useEffect)(() => {
10
- if (typeof IntersectionObserver === "undefined" ||
11
- !imageRef.current) {
10
+ if (typeof IntersectionObserver === "undefined" || !imageRef.current) {
12
11
  return;
13
12
  }
14
13
  const observer = new IntersectionObserver((entries) => {
@@ -34,6 +33,8 @@ const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, }
34
33
  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: {
35
34
  filter: isIntersecting ? "none" : "blur(20px)",
36
35
  transition: "filter 0.9s",
36
+ viewTransitionName,
37
+ ...style,
37
38
  }, ...extraData }));
38
39
  };
39
40
  exports.ImageLazy = ImageLazy;
package/dist/cjs/ImageLazy.min.js CHANGED
@@ -1 +1 @@
1
- "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;
1
+ "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:a,className:s,id:n,extraData:i,title:c,viewTransitionName:o,style:u})=>{const l=(0,react_1.useRef)(null),[d,g]=(0,react_1.useState)(!1);return(0,react_1.useEffect)((()=>{if("undefined"==typeof IntersectionObserver||!l.current)return;const e=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(g(!0),l.current&&(l.current.src=l.current.dataset.src||""),e.unobserve(t.target))}))}),{root:null,rootMargin:"0px",threshold:.5});return e.observe(l.current),()=>{e.disconnect()}}),[e]),(0,jsx_runtime_1.jsx)("img",{ref:l,"data-src":e,alt:t,title:c,className:s,width:r,height:a,loading:"lazy",id:n?.toString(),style:{filter:d?"none":"blur(20px)",transition:"filter 0.9s",viewTransitionName:o,...u},...i})};exports.ImageLazy=ImageLazy,exports.default=ImageLazy;
package/dist/esm/ImageLazy.js CHANGED
@@ -1,11 +1,10 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useEffect, useRef, useState } from "react";
3
- const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, }) => {
3
+ const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, viewTransitionName, style, }) => {
4
4
  const imageRef = useRef(null);
5
5
  const [isIntersecting, setIsIntersecting] = useState(false);
6
6
  useEffect(() => {
7
- if (typeof IntersectionObserver === "undefined" ||
8
- !imageRef.current) {
7
+ if (typeof IntersectionObserver === "undefined" || !imageRef.current) {
9
8
  return;
10
9
  }
11
10
  const observer = new IntersectionObserver((entries) => {
@@ -31,6 +30,8 @@ const ImageLazy = ({ src, alt, width, height, className, id, extraData, title, }
31
30
  return (_jsx("img", { ref: imageRef, "data-src": src, alt: alt, title: title, className: className, width: width, height: height, loading: "lazy", id: id?.toString(), style: {
32
31
  filter: isIntersecting ? "none" : "blur(20px)",
33
32
  transition: "filter 0.9s",
33
+ viewTransitionName,
34
+ ...style,
34
35
  }, ...extraData }));
35
36
  };
36
37
  export default ImageLazy;
package/dist/esm/ImageLazy.min.js CHANGED
@@ -1 +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: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};
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:n,id:a,extraData:i,title:o,viewTransitionName:c,style:u})=>{const l=useRef(null),[f,m]=useState(!1);return useEffect((()=>{if("undefined"==typeof IntersectionObserver||!l.current)return;const e=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(m(!0),l.current&&(l.current.src=l.current.dataset.src||""),e.unobserve(t.target))}))}),{root:null,rootMargin:"0px",threshold:.5});return e.observe(l.current),()=>{e.disconnect()}}),[e]),_jsx("img",{ref:l,"data-src":e,alt:t,title:o,className:n,width:r,height:s,loading:"lazy",id:a?.toString(),style:{filter:f?"none":"blur(20px)",transition:"filter 0.9s",viewTransitionName:c,...u},...i})};export default ImageLazy;export{ImageLazy};
package/dist/types/ImageLazy.d.ts CHANGED
@@ -7,7 +7,9 @@ type ImagesLazy = {
7
7
  className?: string;
8
8
  title?: string;
9
9
  extraData?: React.ImgHTMLAttributes<HTMLImageElement>;
10
+ viewTransitionName?: string;
11
+ style?: React.CSSProperties;
10
12
  };
11
- declare const ImageLazy: ({ src, alt, width, height, className, id, extraData, title, }: ImagesLazy) => import("react/jsx-runtime").JSX.Element;
13
+ declare const ImageLazy: ({ src, alt, width, height, className, id, extraData, title, viewTransitionName, style, }: ImagesLazy) => import("react/jsx-runtime").JSX.Element;
12
14
  export default ImageLazy;
13
15
  export { ImageLazy };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-lazy-img-observer",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "A React component for lazy loading images with Intersection Observer",
5
5
  "main": "dist/cjs/ImageLazy.min.js",
6
6
  "module": "dist/esm/ImageLazy.min.js",
@@ -25,11 +25,24 @@
25
25
  "keywords": [
26
26
  "react",
27
27
  "lazy-load",
28
+ "lazyload",
28
29
  "image",
29
- "intersection-observer"
30
+ "lazy-image",
31
+ "intersection-observer",
32
+ "performance",
33
+ "react-component",
34
+ "react-images",
35
+ "react-lazy",
36
+ "load-on-scroll",
37
+ "responsive-images",
38
+ "web-optimization",
39
+ "accessibility",
40
+ "a11y",
41
+ "react-hooks",
42
+ "viewport"
30
43
  ],
31
44
  "author": "Percy Chuzon <contacto@percychuzon.com>",
32
- "license": "ISC",
45
+ "license": "MIT",
33
46
  "homepage": "https://imagelazy.percychuzon.com/",
34
47
  "repository": {
35
48
  "type": "git",
@@ -39,7 +52,7 @@
39
52
  "url": "https://github.com/perch33/react-lazy-img-observer/issues"
40
53
  },
41
54
  "dependencies": {
42
- "terser": "^5.39.0"
55
+ "terser": "^5.39.2"
43
56
  },
44
57
  "peerDependencies": {
45
58
  "react": ">=17.0.0",