react-lazy-img-observer 1.1.1 → 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.
- package/README.md +29 -11
- package/dist/cjs/ImageLazy.js +4 -3
- package/dist/cjs/ImageLazy.min.js +1 -1
- package/dist/esm/ImageLazy.js +4 -3
- package/dist/esm/ImageLazy.min.js +1 -1
- package/dist/types/ImageLazy.d.ts +3 -1
- package/package.json +1 -1
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` | ✅
|
|
46
|
-
| `alt` | `string` | ✅
|
|
47
|
-
| `width` | `number` | ❌
|
|
48
|
-
| `height` | `number` | ❌
|
|
49
|
-
| `id` | `string \| number` | ❌
|
|
50
|
-
| `className` | `string` | ❌
|
|
51
|
-
| `title` | `string` | ❌
|
|
52
|
-
| `extraData` | `React.ImgHTMLAttributes<HTMLImageElement>` | ❌
|
|
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;
|
|
@@ -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:
|
|
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;
|
|
@@ -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
|
|
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};
|
|
@@ -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