react-datocms - npm Package Compare versions

Comparing version 1.6.8 to 1.6.9

dist/cjs/Image/index.js

@@ -70,14 +70,20 @@ "use strict";
 };
-var Image = function (_a) {
-    var _b, _c;
-    var className = _a.className, fadeInDuration = _a.fadeInDuration, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _d = _a.lazyLoad, lazyLoad = _d === void 0 ? true : _d, style = _a.style, pictureStyle = _a.pictureStyle, explicitWidth = _a.explicitWidth, data = _a.data;
-    var _e = react_1.useState(false), loaded = _e[0], setLoaded = _e[1];
-    var handleLoad = react_1.useCallback(function () {
+exports.Image = react_1.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, _c = _a.fadeInDuration, fadeInDuration = _c === void 0 ? 500 : _c, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _d = _a.lazyLoad, lazyLoad = _d === void 0 ? true : _d, style = _a.style, pictureStyle = _a.pictureStyle, explicitWidth = _a.explicitWidth, data = _a.data, onLoad = _a.onLoad, _e = _a.usePlaceholder, usePlaceholder = _e === void 0 ? true : _e;
+    var _f = react_1.useState(false), loaded = _f[0], setLoaded = _f[1];
+    var handleLoad = function () {
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad();
         setLoaded(true);
-    }, []);
-    var _f = react_intersection_observer_1.useInView({
+    };
+    var _g = react_intersection_observer_1.useInView({
         threshold: intersectionThreshold || intersectionTreshold || 0,
         rootMargin: intersectionMargin || "0px 0px 0px 0px",
         triggerOnce: true
-    }), ref = _f.ref, inView = _f.inView;
+    }), viewRef = _g[0], inView = _g[1];
+    var callbackRef = react_1.useCallback(function (_ref) {
+        viewRef(_ref);
+        if (ref)
+            ref.current = _ref;
+    }, [viewRef]);
     var absolutePositioning = {
@@ -102,6 +108,4 @@ position: "absolute",
     var regularSource = data.srcSet && (react_1["default"].createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
-    var transition = typeof fadeInDuration === "undefined" || fadeInDuration > 0
-        ? "opacity " + (fadeInDuration || 500) + "ms " + (fadeInDuration || 500) + "ms"
-        : undefined;
-    var placeholder = (react_1["default"].createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : undefined, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: transition }, absolutePositioning) }));
+    var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
+    var placeholder = usePlaceholder ? (react_1["default"].createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : undefined, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: transition }, absolutePositioning) })) : null;
     var width = data.width, aspectRatio = data.aspectRatio;
@@ -111,3 +115,3 @@ var height = data.height || width / aspectRatio;
     var sizer = (react_1["default"].createElement("img", { className: pictureClassName, style: __assign({ display: "block", width: explicitWidth ? width + "px" : "100%" }, pictureStyle), src: "data:image/svg+xml;base64," + universalBtoa(svg), role: "presentation" }));
-    return (react_1["default"].createElement("div", { ref: ref, className: className, style: __assign(__assign({ display: explicitWidth ? "inline-block" : "block", overflow: "hidden" }, style), { position: "relative" }) },
+    return (react_1["default"].createElement("div", { ref: callbackRef, className: className, style: __assign({ display: explicitWidth ? "inline-block" : "block", overflow: "hidden", position: "relative" }, style) },
         sizer,
@@ -118,3 +122,3 @@ placeholder,
             regularSource,
-            data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), pictureStyle), { opacity: showImage ? 1 : 0, transition: transition }) })))),
+            data.src && (react_1["default"].createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), pictureStyle), { opacity: showImage ? 1 : 0, transition: transition }) })))),
         react_1["default"].createElement("noscript", null,
@@ -124,5 +128,4 @@ react_1["default"].createElement("picture", null,
                 regularSource,
-                data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_c = data.alt) !== null && _c !== void 0 ? _c : '', title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
-};
-exports.Image = Image;
+                data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : "", title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
+});
 //# sourceMappingURL=index.js.map

dist/esm/Image/index.d.ts

@@ -42,3 +42,3 @@ import React from "react";
     intersectionMargin?: string;
-    /** Wheter enable lazy loading or not */
+    /** Whether enable lazy loading or not */
     lazyLoad?: boolean;
@@ -49,6 +49,10 @@ /** Additional CSS rules to add to the root node */
     pictureStyle?: React.CSSProperties;
-    /** Wheter the image wrapper should explicitely declare the width of the image or keep it fluid */
+    /** Whether the image wrapper should explicitely declare the width of the image or keep it fluid */
     explicitWidth?: boolean;
+    /** Triggered when the image finishes loading */
+    onLoad?(): void;
+    /** Whether the component should use a blurred image placeholder */
+    usePlaceholder?: boolean;
 };
-export declare const Image: React.FC<ImagePropTypes>;
+export declare const Image: React.ForwardRefExoticComponent<ImagePropTypes & React.RefAttributes<HTMLDivElement>>;
 export {};

dist/esm/Image/index.js

@@ -12,3 +12,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { useCallback, useState } from "react";
+import React, { useState, forwardRef, useCallback } from "react";
 import "intersection-observer";
@@ -49,14 +49,20 @@ import { useInView } from "react-intersection-observer";
 };
-export var Image = function (_a) {
-    var _b, _c;
-    var className = _a.className, fadeInDuration = _a.fadeInDuration, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _d = _a.lazyLoad, lazyLoad = _d === void 0 ? true : _d, style = _a.style, pictureStyle = _a.pictureStyle, explicitWidth = _a.explicitWidth, data = _a.data;
-    var _e = useState(false), loaded = _e[0], setLoaded = _e[1];
-    var handleLoad = useCallback(function () {
+export var Image = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, _c = _a.fadeInDuration, fadeInDuration = _c === void 0 ? 500 : _c, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _d = _a.lazyLoad, lazyLoad = _d === void 0 ? true : _d, style = _a.style, pictureStyle = _a.pictureStyle, explicitWidth = _a.explicitWidth, data = _a.data, onLoad = _a.onLoad, _e = _a.usePlaceholder, usePlaceholder = _e === void 0 ? true : _e;
+    var _f = useState(false), loaded = _f[0], setLoaded = _f[1];
+    var handleLoad = function () {
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad();
         setLoaded(true);
-    }, []);
-    var _f = useInView({
+    };
+    var _g = useInView({
         threshold: intersectionThreshold || intersectionTreshold || 0,
         rootMargin: intersectionMargin || "0px 0px 0px 0px",
         triggerOnce: true
-    }), ref = _f.ref, inView = _f.inView;
+    }), viewRef = _g[0], inView = _g[1];
+    var callbackRef = useCallback(function (_ref) {
+        viewRef(_ref);
+        if (ref)
+            ref.current = _ref;
+    }, [viewRef]);
     var absolutePositioning = {
@@ -81,6 +87,4 @@ position: "absolute",
     var regularSource = data.srcSet && (React.createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
-    var transition = typeof fadeInDuration === "undefined" || fadeInDuration > 0
-        ? "opacity " + (fadeInDuration || 500) + "ms " + (fadeInDuration || 500) + "ms"
-        : undefined;
-    var placeholder = (React.createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : undefined, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: transition }, absolutePositioning) }));
+    var transition = fadeInDuration > 0 ? "opacity " + fadeInDuration + "ms" : undefined;
+    var placeholder = usePlaceholder ? (React.createElement("div", { style: __assign({ backgroundImage: data.base64 ? "url(" + data.base64 + ")" : undefined, backgroundColor: data.bgColor, backgroundSize: "cover", opacity: showImage ? 0 : 1, transition: transition }, absolutePositioning) })) : null;
     var width = data.width, aspectRatio = data.aspectRatio;
@@ -90,3 +94,3 @@ var height = data.height || width / aspectRatio;
     var sizer = (React.createElement("img", { className: pictureClassName, style: __assign({ display: "block", width: explicitWidth ? width + "px" : "100%" }, pictureStyle), src: "data:image/svg+xml;base64," + universalBtoa(svg), role: "presentation" }));
-    return (React.createElement("div", { ref: ref, className: className, style: __assign(__assign({ display: explicitWidth ? "inline-block" : "block", overflow: "hidden" }, style), { position: "relative" }) },
+    return (React.createElement("div", { ref: callbackRef, className: className, style: __assign({ display: explicitWidth ? "inline-block" : "block", overflow: "hidden", position: "relative" }, style) },
         sizer,
@@ -97,3 +101,3 @@ placeholder,
             regularSource,
-            data.src && (React.createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : '', title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), pictureStyle), { opacity: showImage ? 1 : 0, transition: transition }) })))),
+            data.src && (React.createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), pictureStyle), { opacity: showImage ? 1 : 0, transition: transition }) })))),
         React.createElement("noscript", null,
@@ -103,4 +107,4 @@ React.createElement("picture", null,
                 regularSource,
-                data.src && (React.createElement("img", { src: data.src, alt: (_c = data.alt) !== null && _c !== void 0 ? _c : '', title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
-};
+                data.src && (React.createElement("img", { src: data.src, alt: (_b = data.alt) !== null && _b !== void 0 ? _b : "", title: data.title, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: "lazy" }))))));
+});
 //# sourceMappingURL=index.js.map

dist/types/Image/index.d.ts

@@ -42,3 +42,3 @@ import React from "react";
     intersectionMargin?: string;
-    /** Wheter enable lazy loading or not */
+    /** Whether enable lazy loading or not */
     lazyLoad?: boolean;
@@ -49,6 +49,10 @@ /** Additional CSS rules to add to the root node */
     pictureStyle?: React.CSSProperties;
-    /** Wheter the image wrapper should explicitely declare the width of the image or keep it fluid */
+    /** Whether the image wrapper should explicitely declare the width of the image or keep it fluid */
     explicitWidth?: boolean;
+    /** Triggered when the image finishes loading */
+    onLoad?(): void;
+    /** Whether the component should use a blurred image placeholder */
+    usePlaceholder?: boolean;
 };
-export declare const Image: React.FC<ImagePropTypes>;
+export declare const Image: React.ForwardRefExoticComponent<ImagePropTypes & React.RefAttributes<HTMLDivElement>>;
 export {};

package.json

 {
   "name": "react-datocms",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "types": "dist/types/index.d.ts",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -250,4 +250,6 @@ # react-datocms
 | intersectionMargin    | string                   | :x:                | Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections.                  | "0px 0px 0px 0px" |
-| lazyLoad              | Boolean                  | :x:                | Wheter enable lazy loading or not                                                                                                                                                                                                                                                             | true              |
-| explicitWidth         | Boolean                  | :x:                | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid                                                                                                                                                                                                   | false             |
+| lazyLoad              | Boolean                  | :x:                | Whether enable lazy loading or not                                                                                                                                                                                                                                                            | true              |
+| explicitWidth         | Boolean                  | :x:                | Whether the image wrapper should explicitely declare the width of the image or keep it fluid                                                                                                                                                                                                  | false             |
+| onLoad                | () => void               | :x:                | Function triggered when the image has finished loading                                                                                                                                                                                                                                        | undefined         |
+| usePlaceholder        | Boolean                  | :x:                | Whether the component should use a blurred image placeholder                                                                                                                                                                                                                                  | true              |
 
@@ -254,0 +256,0 @@ ### The `ResponsiveImage` object

No alert changes

Improved metrics

Total package byte prevSize

158909

increased by1.36%

Lines of code

1764

increased by0.92%

Number of lines in readme file

658

increased by0.3%

No dependency changes