@starlightcms/react-sdk 0.5.0 → 0.7.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/dist/cjs/ResponsiveImage/index.d.ts +4 -2
- package/dist/cjs/ResponsiveImage/index.d.ts.map +1 -1
- package/dist/cjs/ResponsiveImage/index.js +4 -1
- package/dist/cjs/ResponsiveImage/index.js.map +1 -1
- package/dist/esm/ResponsiveImage/index.d.ts +4 -2
- package/dist/esm/ResponsiveImage/index.d.ts.map +1 -1
- package/dist/esm/ResponsiveImage/index.js +5 -2
- package/dist/esm/ResponsiveImage/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
2
|
import { MediaObject } from '@starlightcms/js-sdk';
|
|
3
3
|
export declare const GlobalLazyloadStyles: () => ReactNode;
|
|
4
4
|
declare type ResponsiveImageProps = {
|
|
@@ -8,7 +8,9 @@ declare type ResponsiveImageProps = {
|
|
|
8
8
|
alt?: string;
|
|
9
9
|
variation?: string;
|
|
10
10
|
background?: string;
|
|
11
|
+
lazyRoot?: RefObject<HTMLElement> | null;
|
|
12
|
+
lazyRootMargin?: string;
|
|
11
13
|
};
|
|
12
|
-
export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, }: ResponsiveImageProps) => JSX.Element;
|
|
14
|
+
export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, lazyRoot, lazyRootMargin, }: ResponsiveImageProps) => JSX.Element;
|
|
13
15
|
export {};
|
|
14
16
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,SAAS,EACT,SAAS,EAKV,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAKlD,eAAO,MAAM,oBAAoB,QAAO,SAMvC,CAAA;AAED,aAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,WAAW,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,uFASzB,oBAAoB,KAAG,WA2GzB,CAAA"}
|
|
@@ -27,7 +27,7 @@ const GlobalLazyloadStyles = () => {
|
|
|
27
27
|
react_1.default.createElement("style", null, 'img.sl-lazyload{display: none;}')));
|
|
28
28
|
};
|
|
29
29
|
exports.GlobalLazyloadStyles = GlobalLazyloadStyles;
|
|
30
|
-
const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', }) => {
|
|
30
|
+
const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', lazyRoot, lazyRootMargin = '200px', }) => {
|
|
31
31
|
const imageRef = (0, react_1.useRef)(null);
|
|
32
32
|
// When true, the image may load normally
|
|
33
33
|
const [canLoad, setCanLoad] = (0, react_1.useState)(false);
|
|
@@ -80,6 +80,9 @@ const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image
|
|
|
80
80
|
// Stop observing the image
|
|
81
81
|
observer.unobserve(ref);
|
|
82
82
|
}
|
|
83
|
+
}, {
|
|
84
|
+
root: lazyRoot === null || lazyRoot === void 0 ? void 0 : lazyRoot.current,
|
|
85
|
+
rootMargin: lazyRootMargin,
|
|
83
86
|
});
|
|
84
87
|
if (imageRef.current) {
|
|
85
88
|
ref = imageRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n ReactNode,\n RefObject,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { MediaObject } from '@starlightcms/js-sdk'\n\nconst transparentImage =\n 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='\n\nexport const GlobalLazyloadStyles = (): ReactNode => {\n return (\n <noscript>\n <style>{'img.sl-lazyload{display: none;}'}</style>\n </noscript>\n )\n}\n\ntype ResponsiveImageProps = {\n className?: string\n image: MediaObject | string\n sizes?: string\n alt?: string\n variation?: string\n background?: string\n lazyRoot?: RefObject<HTMLElement> | null\n lazyRootMargin?: string\n}\n\nexport const ResponsiveImage = ({\n className = '',\n image,\n sizes = '',\n alt = typeof image === 'string' ? '' : image.alt,\n variation = 'optimized',\n background = '',\n lazyRoot,\n lazyRootMargin = '200px',\n}: ResponsiveImageProps): JSX.Element => {\n const imageRef = useRef<HTMLImageElement>(null)\n\n // When true, the image may load normally\n const [canLoad, setCanLoad] = useState(false)\n\n // When true, the image has been successfully loaded by the browser\n const [hasLoaded, setHasLoaded] = useState(false)\n\n // Get the optimized variation if available\n const source = useMemo(() => {\n // If the given image was a string, simply return it\n if (typeof image === 'string' || !image.files) return\n\n const chosenVariation = image.files.find(\n (file) => file.variation === variation\n )\n\n return chosenVariation\n ? chosenVariation\n : image.files.find((file) => file.variation === 'original')\n }, [image, variation])\n\n // Create a srcset\n const sourceSet = useMemo(() => {\n if (!source) return\n\n // source is only defined if image is a MediaObject, so we assert it as one\n const img = image as MediaObject\n\n const sets = []\n const large = img.files.find((file) => file.variation === 'large')\n const medium = img.files.find((file) => file.variation === 'medium')\n const thumbnail = img.files.find((file) => file.variation === 'thumbnail')\n\n if (thumbnail)\n sets.push(`${encodeURI(thumbnail.path)} ${thumbnail.meta?.width}w`)\n if (medium) sets.push(`${encodeURI(medium.path)} 600w`)\n if (large) sets.push(`${encodeURI(large.path)} 1200w`)\n sets.push(`${encodeURI(source.path)} ${source.meta?.width}w`)\n\n return sets.join(',')\n }, [source, image])\n\n const imageStyle = useMemo(() => {\n return {\n backgroundColor:\n background || hasLoaded || typeof image === 'string'\n ? 'transparent'\n : `#${source?.background_color ?? 'transparent'}`,\n }\n }, [background, source, hasLoaded, image])\n\n useEffect(() => {\n let ref: HTMLImageElement | null = null\n const observer = new IntersectionObserver(\n (entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n // Image entered the viewport, set it as loadable\n setCanLoad(true)\n\n // Stop observing the image\n observer.unobserve(ref as HTMLImageElement)\n }\n },\n {\n root: lazyRoot?.current,\n rootMargin: lazyRootMargin,\n }\n )\n\n if (imageRef.current) {\n ref = imageRef.current\n observer.observe(ref)\n }\n\n const loadHandler = () => {\n // After loading the image, the \"hasLoaded\" flag is used to hide the background color\n setHasLoaded(true)\n }\n\n ref?.addEventListener('load', loadHandler)\n\n return () => {\n if (ref) {\n observer.unobserve(ref)\n ref.removeEventListener('load', loadHandler)\n }\n }\n }, [source])\n\n return (\n <>\n <img\n ref={imageRef}\n className={'sl-lazyload ' + className}\n style={imageStyle}\n src={canLoad ? source?.path || (image as string) : transparentImage}\n srcSet={canLoad ? (sourceSet ? sourceSet : undefined) : undefined}\n sizes={canLoad ? (sourceSet ? sizes : undefined) : undefined}\n alt={alt}\n />\n <noscript>\n <img src={(source && source.path) || (image as string)} alt={alt} />\n </noscript>\n </>\n )\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
2
|
import { MediaObject } from '@starlightcms/js-sdk';
|
|
3
3
|
export declare const GlobalLazyloadStyles: () => ReactNode;
|
|
4
4
|
declare type ResponsiveImageProps = {
|
|
@@ -8,7 +8,9 @@ declare type ResponsiveImageProps = {
|
|
|
8
8
|
alt?: string;
|
|
9
9
|
variation?: string;
|
|
10
10
|
background?: string;
|
|
11
|
+
lazyRoot?: RefObject<HTMLElement> | null;
|
|
12
|
+
lazyRootMargin?: string;
|
|
11
13
|
};
|
|
12
|
-
export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, }: ResponsiveImageProps) => JSX.Element;
|
|
14
|
+
export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, lazyRoot, lazyRootMargin, }: ResponsiveImageProps) => JSX.Element;
|
|
13
15
|
export {};
|
|
14
16
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,SAAS,EACT,SAAS,EAKV,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAKlD,eAAO,MAAM,oBAAoB,QAAO,SAMvC,CAAA;AAED,aAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,WAAW,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,uFASzB,oBAAoB,KAAG,WA2GzB,CAAA"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
1
|
+
import React, { useEffect, useMemo, useRef, useState, } from 'react';
|
|
2
2
|
const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
|
|
3
3
|
export const GlobalLazyloadStyles = () => {
|
|
4
4
|
return (React.createElement("noscript", null,
|
|
5
5
|
React.createElement("style", null, 'img.sl-lazyload{display: none;}')));
|
|
6
6
|
};
|
|
7
|
-
export const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', }) => {
|
|
7
|
+
export const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', lazyRoot, lazyRootMargin = '200px', }) => {
|
|
8
8
|
const imageRef = useRef(null);
|
|
9
9
|
// When true, the image may load normally
|
|
10
10
|
const [canLoad, setCanLoad] = useState(false);
|
|
@@ -57,6 +57,9 @@ export const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeo
|
|
|
57
57
|
// Stop observing the image
|
|
58
58
|
observer.unobserve(ref);
|
|
59
59
|
}
|
|
60
|
+
}, {
|
|
61
|
+
root: lazyRoot === null || lazyRoot === void 0 ? void 0 : lazyRoot.current,
|
|
62
|
+
rootMargin: lazyRootMargin,
|
|
60
63
|
});
|
|
61
64
|
if (imageRef.current) {
|
|
62
65
|
ref = imageRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AAGd,MAAM,gBAAgB,GACpB,4EAA4E,CAAA;AAE9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAc,EAAE;IAClD,OAAO,CACL;QACE,mCAAQ,iCAAiC,CAAS,CACzC,CACZ,CAAA;AACH,CAAC,CAAA;AAaD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,GAAG,EAAE,EACd,KAAK,EACL,KAAK,GAAG,EAAE,EACV,GAAG,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,EAChD,SAAS,GAAG,WAAW,EACvB,UAAU,GAAG,EAAE,EACf,QAAQ,EACR,cAAc,GAAG,OAAO,GACH,EAAe,EAAE;IACtC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE/C,yCAAyC;IACzC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,mEAAmE;IACnE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,2CAA2C;IAC3C,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,oDAAoD;QACpD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,KAAK;YAAE,OAAM;QAErD,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CACtC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,SAAS,CACvC,CAAA;QAED,OAAO,eAAe;YACpB,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,CAAA;IAC/D,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAA;IAEtB,kBAAkB;IAClB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC7B,IAAI,CAAC,MAAM;YAAE,OAAM;QAEnB,2EAA2E;QAC3E,MAAM,GAAG,GAAG,KAAoB,CAAA;QAEhC,MAAM,IAAI,GAAG,EAAE,CAAA;QACf,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAA;QAClE,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAA;QACpE,MAAM,SAAS,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,WAAW,CAAC,CAAA;QAE1E,IAAI,SAAS;YACX,IAAI,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,MAAA,SAAS,CAAC,IAAI,0CAAE,KAAK,GAAG,CAAC,CAAA;QACrE,IAAI,MAAM;YAAE,IAAI,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACvD,IAAI,KAAK;YAAE,IAAI,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACtD,IAAI,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,MAAA,MAAM,CAAC,IAAI,0CAAE,KAAK,GAAG,CAAC,CAAA;QAE7D,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACvB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAEnB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC9B,OAAO;YACL,eAAe,EACb,UAAU,IAAI,SAAS,IAAI,OAAO,KAAK,KAAK,QAAQ;gBAClD,CAAC,CAAC,aAAa;gBACf,CAAC,CAAC,IAAI,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,mCAAI,aAAa,EAAE;SACtD,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAA;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,GAA4B,IAAI,CAAA;QACvC,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YACpB,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,EAAE;gBACpC,iDAAiD;gBACjD,UAAU,CAAC,IAAI,CAAC,CAAA;gBAEhB,2BAA2B;gBAC3B,QAAQ,CAAC,SAAS,CAAC,GAAuB,CAAC,CAAA;aAC5C;QACH,CAAC,EACD;YACE,IAAI,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO;YACvB,UAAU,EAAE,cAAc;SAC3B,CACF,CAAA;QAED,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAA;YACtB,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;SACtB;QAED,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,qFAAqF;YACrF,YAAY,CAAC,IAAI,CAAC,CAAA;QACpB,CAAC,CAAA;QAED,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,gBAAgB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;QAE1C,OAAO,GAAG,EAAE;YACV,IAAI,GAAG,EAAE;gBACP,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;gBACvB,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;aAC7C;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,CACL;QACE,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,cAAc,GAAG,SAAS,EACrC,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAK,KAAgB,CAAC,CAAC,CAAC,gBAAgB,EACnE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EACjE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5D,GAAG,EAAE,GAAG,GACR;QACF;YACE,6BAAK,GAAG,EAAE,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,IAAK,KAAgB,EAAE,GAAG,EAAE,GAAG,GAAI,CAC3D,CACV,CACJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React, {\n ReactNode,\n RefObject,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { MediaObject } from '@starlightcms/js-sdk'\n\nconst transparentImage =\n 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='\n\nexport const GlobalLazyloadStyles = (): ReactNode => {\n return (\n <noscript>\n <style>{'img.sl-lazyload{display: none;}'}</style>\n </noscript>\n )\n}\n\ntype ResponsiveImageProps = {\n className?: string\n image: MediaObject | string\n sizes?: string\n alt?: string\n variation?: string\n background?: string\n lazyRoot?: RefObject<HTMLElement> | null\n lazyRootMargin?: string\n}\n\nexport const ResponsiveImage = ({\n className = '',\n image,\n sizes = '',\n alt = typeof image === 'string' ? '' : image.alt,\n variation = 'optimized',\n background = '',\n lazyRoot,\n lazyRootMargin = '200px',\n}: ResponsiveImageProps): JSX.Element => {\n const imageRef = useRef<HTMLImageElement>(null)\n\n // When true, the image may load normally\n const [canLoad, setCanLoad] = useState(false)\n\n // When true, the image has been successfully loaded by the browser\n const [hasLoaded, setHasLoaded] = useState(false)\n\n // Get the optimized variation if available\n const source = useMemo(() => {\n // If the given image was a string, simply return it\n if (typeof image === 'string' || !image.files) return\n\n const chosenVariation = image.files.find(\n (file) => file.variation === variation\n )\n\n return chosenVariation\n ? chosenVariation\n : image.files.find((file) => file.variation === 'original')\n }, [image, variation])\n\n // Create a srcset\n const sourceSet = useMemo(() => {\n if (!source) return\n\n // source is only defined if image is a MediaObject, so we assert it as one\n const img = image as MediaObject\n\n const sets = []\n const large = img.files.find((file) => file.variation === 'large')\n const medium = img.files.find((file) => file.variation === 'medium')\n const thumbnail = img.files.find((file) => file.variation === 'thumbnail')\n\n if (thumbnail)\n sets.push(`${encodeURI(thumbnail.path)} ${thumbnail.meta?.width}w`)\n if (medium) sets.push(`${encodeURI(medium.path)} 600w`)\n if (large) sets.push(`${encodeURI(large.path)} 1200w`)\n sets.push(`${encodeURI(source.path)} ${source.meta?.width}w`)\n\n return sets.join(',')\n }, [source, image])\n\n const imageStyle = useMemo(() => {\n return {\n backgroundColor:\n background || hasLoaded || typeof image === 'string'\n ? 'transparent'\n : `#${source?.background_color ?? 'transparent'}`,\n }\n }, [background, source, hasLoaded, image])\n\n useEffect(() => {\n let ref: HTMLImageElement | null = null\n const observer = new IntersectionObserver(\n (entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n // Image entered the viewport, set it as loadable\n setCanLoad(true)\n\n // Stop observing the image\n observer.unobserve(ref as HTMLImageElement)\n }\n },\n {\n root: lazyRoot?.current,\n rootMargin: lazyRootMargin,\n }\n )\n\n if (imageRef.current) {\n ref = imageRef.current\n observer.observe(ref)\n }\n\n const loadHandler = () => {\n // After loading the image, the \"hasLoaded\" flag is used to hide the background color\n setHasLoaded(true)\n }\n\n ref?.addEventListener('load', loadHandler)\n\n return () => {\n if (ref) {\n observer.unobserve(ref)\n ref.removeEventListener('load', loadHandler)\n }\n }\n }, [source])\n\n return (\n <>\n <img\n ref={imageRef}\n className={'sl-lazyload ' + className}\n style={imageStyle}\n src={canLoad ? source?.path || (image as string) : transparentImage}\n srcSet={canLoad ? (sourceSet ? sourceSet : undefined) : undefined}\n sizes={canLoad ? (sourceSet ? sizes : undefined) : undefined}\n alt={alt}\n />\n <noscript>\n <img src={(source && source.path) || (image as string)} alt={alt} />\n </noscript>\n </>\n )\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starlightcms/react-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "The Starlight SDK for React",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
]
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@starlightcms/js-sdk": "^0.
|
|
57
|
+
"@starlightcms/js-sdk": "^0.9.0"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"react": ">=16.0.0"
|