react-datocms - npm Package Compare versions

Comparing version 1.6.9 to 2.0.1

dist/cjs/Image/__tests__/index.test.js

@@ -27,38 +27,42 @@ "use strict";
 var data = {
-    alt: "DatoCMS swag",
+    alt: 'DatoCMS swag',
     aspectRatio: 1.7777777777777777,
-    base64: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
+    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
     height: 421,
-    sizes: "(max-width: 750px) 100vw, 750px",
-    src: "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
-    srcSet: "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
-    title: "These are awesome, we know that.",
+    sizes: '(max-width: 750px) 100vw, 750px',
+    src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
+    srcSet: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w',
+    title: 'These are awesome, we know that.',
     width: 750
 };
-describe("Image", function () {
+describe('Image', function () {
     // intersectionThreshold is an hack to make tests work
     // we need the library to generate a different IntersectionObserver for each test
     // otherwise the IntersectionObserver mocking won't work
-    describe("not visible", function () {
-        it("renders the blur-up thumb", function () {
-            var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, intersectionThreshold: 0.1 }));
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-    describe("visible", function () {
-        it("renders the image", function () {
-            var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, intersectionThreshold: 0.2 }));
-            test_utils_1.mockAllIsIntersecting(true);
-            wrapper.update();
-            expect(wrapper).toMatchSnapshot();
-        });
-        describe("image loaded", function () {
-            it("shows the image", function () {
-                var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, intersectionThreshold: 0.3 }));
-                test_utils_1.mockAllIsIntersecting(true);
-                wrapper.update();
-                wrapper.find("img").last().simulate("load");
-                wrapper.update();
-                expect(wrapper).toMatchSnapshot();
+    ['intrinsic', 'fixed', 'responsive', 'fill'].forEach(function (layout) {
+        describe("layout=" + layout, function () {
+            describe('not visible', function () {
+                it('renders the blur-up thumb', function () {
+                    var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, layout: layout, intersectionThreshold: 0.1 }));
+                    expect(wrapper).toMatchSnapshot();
+                });
             });
+            describe('visible', function () {
+                it('renders the image', function () {
+                    var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, layout: layout, intersectionThreshold: 0.2 }));
+                    test_utils_1.mockAllIsIntersecting(true);
+                    wrapper.update();
+                    expect(wrapper).toMatchSnapshot();
+                });
+                describe('image loaded', function () {
+                    it('shows the image', function () {
+                        var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, layout: layout, intersectionThreshold: 0.3 }));
+                        test_utils_1.mockAllIsIntersecting(true);
+                        wrapper.update();
+                        wrapper.find('img').last().simulate('load');
+                        wrapper.update();
+                        expect(wrapper).toMatchSnapshot();
+                    });
+                });
+            });
         });
@@ -65,0 +69,0 @@ });

dist/cjs/Image/index.js

@@ -37,5 +37,5 @@ "use strict";
 var react_intersection_observer_1 = require("react-intersection-observer");
-var isSsr = typeof window === "undefined";
+var isSsr = typeof window === 'undefined';
 var universalBtoa = isSsr
-    ? function (str) { return Buffer.from(str.toString(), "binary").toString("base64"); }
+    ? function (str) { return Buffer.from(str.toString(), 'binary').toString('base64'); }
     : window.btoa;
@@ -73,4 +73,4 @@ var isIntersectionObserverAvailable = isSsr
     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 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, _e = _a.layout, layout = _e === void 0 ? 'intrinsic' : _e, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _f = _a.usePlaceholder, usePlaceholder = _f === void 0 ? true : _f;
+    var _g = react_1.useState(false), loaded = _g[0], setLoaded = _g[1];
     var handleLoad = function () {
@@ -80,7 +80,7 @@ onLoad === null || onLoad === void 0 ? void 0 : onLoad();
     };
-    var _g = react_intersection_observer_1.useInView({
+    var _h = react_intersection_observer_1.useInView({
         threshold: intersectionThreshold || intersectionTreshold || 0,
-        rootMargin: intersectionMargin || "0px 0px 0px 0px",
+        rootMargin: intersectionMargin || '0px 0px 0px 0px',
         triggerOnce: true
-    }), viewRef = _g[0], inView = _g[1];
+    }), viewRef = _h[0], inView = _h[1];
     var callbackRef = react_1.useCallback(function (_ref) {
@@ -92,7 +92,7 @@ viewRef(_ref);
     var absolutePositioning = {
-        position: "absolute",
+        position: 'absolute',
         left: 0,
         top: 0,
-        width: "100%",
-        height: "100%"
+        width: '100%',
+        height: '100%'
     };
@@ -112,8 +112,19 @@ var addImage = imageAddStrategy({
     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 placeholder = usePlaceholder ? (react_1["default"].createElement("img", { role: "presentation", src: data.base64, style: __assign({ backgroundColor: data.bgColor, opacity: showImage ? 0 : 1, transition: transition,
+            objectFit: objectFit,
+            objectPosition: objectPosition }, absolutePositioning) })) : null;
     var width = data.width, aspectRatio = data.aspectRatio;
     var height = data.height || width / aspectRatio;
     var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
-    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: callbackRef, className: className, style: __assign({ display: explicitWidth ? "inline-block" : "block", overflow: "hidden", position: "relative" }, style) },
+    var sizer = layout !== 'fill' ? (react_1["default"].createElement("img", { className: pictureClassName, style: {
+            display: 'block',
+            width: '100%'
+        }, src: "data:image/svg+xml;base64," + universalBtoa(svg), role: "presentation" })) : null;
+    return (react_1["default"].createElement("div", { ref: callbackRef, className: className, style: __assign(__assign({ overflow: 'hidden' }, (layout === 'fill'
+            ? absolutePositioning
+            : layout === 'intrinsic'
+                ? { position: 'relative', width: '100%', maxWidth: width }
+                : layout === 'fixed'
+                    ? { position: 'relative', width: width }
+                    : { position: 'relative', width: '100%' })), style) },
         sizer,
@@ -124,3 +135,4 @@ placeholder,
             regularSource,
-            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 }) })))),
+            data.src && (react_1["default"].createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit,
+                    objectPosition: objectPosition }), pictureStyle) })))),
         react_1["default"].createElement("noscript", null,
@@ -130,4 +142,4 @@ react_1["default"].createElement("picture", null,
                 regularSource,
-                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" }))))));
+                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/__tests__/index.test.js

@@ -1,42 +0,46 @@
-import * as React from "react";
-import { mount } from "enzyme";
-import { Image } from "../index";
-import { mockAllIsIntersecting } from "react-intersection-observer/test-utils";
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { Image } from '../index';
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
 var data = {
-    alt: "DatoCMS swag",
+    alt: 'DatoCMS swag',
     aspectRatio: 1.7777777777777777,
-    base64: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
+    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
     height: 421,
-    sizes: "(max-width: 750px) 100vw, 750px",
-    src: "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
-    srcSet: "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
-    title: "These are awesome, we know that.",
+    sizes: '(max-width: 750px) 100vw, 750px',
+    src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
+    srcSet: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w',
+    title: 'These are awesome, we know that.',
     width: 750
 };
-describe("Image", function () {
+describe('Image', function () {
     // intersectionThreshold is an hack to make tests work
     // we need the library to generate a different IntersectionObserver for each test
     // otherwise the IntersectionObserver mocking won't work
-    describe("not visible", function () {
-        it("renders the blur-up thumb", function () {
-            var wrapper = mount(React.createElement(Image, { data: data, intersectionThreshold: 0.1 }));
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-    describe("visible", function () {
-        it("renders the image", function () {
-            var wrapper = mount(React.createElement(Image, { data: data, intersectionThreshold: 0.2 }));
-            mockAllIsIntersecting(true);
-            wrapper.update();
-            expect(wrapper).toMatchSnapshot();
-        });
-        describe("image loaded", function () {
-            it("shows the image", function () {
-                var wrapper = mount(React.createElement(Image, { data: data, intersectionThreshold: 0.3 }));
-                mockAllIsIntersecting(true);
-                wrapper.update();
-                wrapper.find("img").last().simulate("load");
-                wrapper.update();
-                expect(wrapper).toMatchSnapshot();
+    ['intrinsic', 'fixed', 'responsive', 'fill'].forEach(function (layout) {
+        describe("layout=" + layout, function () {
+            describe('not visible', function () {
+                it('renders the blur-up thumb', function () {
+                    var wrapper = mount(React.createElement(Image, { data: data, layout: layout, intersectionThreshold: 0.1 }));
+                    expect(wrapper).toMatchSnapshot();
+                });
             });
+            describe('visible', function () {
+                it('renders the image', function () {
+                    var wrapper = mount(React.createElement(Image, { data: data, layout: layout, intersectionThreshold: 0.2 }));
+                    mockAllIsIntersecting(true);
+                    wrapper.update();
+                    expect(wrapper).toMatchSnapshot();
+                });
+                describe('image loaded', function () {
+                    it('shows the image', function () {
+                        var wrapper = mount(React.createElement(Image, { data: data, layout: layout, intersectionThreshold: 0.3 }));
+                        mockAllIsIntersecting(true);
+                        wrapper.update();
+                        wrapper.find('img').last().simulate('load');
+                        wrapper.update();
+                        expect(wrapper).toMatchSnapshot();
+                    });
+                });
+            });
         });
@@ -43,0 +47,0 @@ });

dist/esm/Image/index.d.ts

@@ -1,3 +0,3 @@
-import React from "react";
-import "intersection-observer";
+import React, { CSSProperties } from 'react';
+import 'intersection-observer';
 export declare type ResponsiveImageType = {
@@ -48,4 +48,17 @@ /** The aspect ratio (width/height) of the image */
     pictureStyle?: React.CSSProperties;
-    /** Whether the image wrapper should explicitely declare the width of the image or keep it fluid */
-    explicitWidth?: boolean;
+    /**
+     * The layout behavior of the image as the viewport changes size
+     *
+     * Possible values:
+     *
+     * * `intrinsic` (default): the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
+     * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
+     * * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
+     * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
+     * */
+    layout?: 'intrinsic' | 'fixed' | 'responsive' | 'fill';
+    /** Defines how the image will fit into its parent container when using layout="fill" */
+    objectFit?: CSSProperties['objectFit'];
+    /** Defines how the image is positioned within its parent element when using layout="fill". */
+    objectPosition?: CSSProperties['objectPosition'];
     /** Triggered when the image finishes loading */
@@ -52,0 +65,0 @@ onLoad?(): void;

dist/esm/Image/index.js

@@ -12,8 +12,8 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { useState, forwardRef, useCallback } from "react";
-import "intersection-observer";
-import { useInView } from "react-intersection-observer";
-var isSsr = typeof window === "undefined";
+import React, { useState, forwardRef, useCallback } from 'react';
+import 'intersection-observer';
+import { useInView } from 'react-intersection-observer';
+var isSsr = typeof window === 'undefined';
 var universalBtoa = isSsr
-    ? function (str) { return Buffer.from(str.toString(), "binary").toString("base64"); }
+    ? function (str) { return Buffer.from(str.toString(), 'binary').toString('base64'); }
     : window.btoa;
@@ -51,4 +51,4 @@ var isIntersectionObserverAvailable = isSsr
     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 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, _e = _a.layout, layout = _e === void 0 ? 'intrinsic' : _e, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _f = _a.usePlaceholder, usePlaceholder = _f === void 0 ? true : _f;
+    var _g = useState(false), loaded = _g[0], setLoaded = _g[1];
     var handleLoad = function () {
@@ -58,7 +58,7 @@ onLoad === null || onLoad === void 0 ? void 0 : onLoad();
     };
-    var _g = useInView({
+    var _h = useInView({
         threshold: intersectionThreshold || intersectionTreshold || 0,
-        rootMargin: intersectionMargin || "0px 0px 0px 0px",
+        rootMargin: intersectionMargin || '0px 0px 0px 0px',
         triggerOnce: true
-    }), viewRef = _g[0], inView = _g[1];
+    }), viewRef = _h[0], inView = _h[1];
     var callbackRef = useCallback(function (_ref) {
@@ -70,7 +70,7 @@ viewRef(_ref);
     var absolutePositioning = {
-        position: "absolute",
+        position: 'absolute',
         left: 0,
         top: 0,
-        width: "100%",
-        height: "100%"
+        width: '100%',
+        height: '100%'
     };
@@ -90,8 +90,19 @@ var addImage = imageAddStrategy({
     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 placeholder = usePlaceholder ? (React.createElement("img", { role: "presentation", src: data.base64, style: __assign({ backgroundColor: data.bgColor, opacity: showImage ? 0 : 1, transition: transition,
+            objectFit: objectFit,
+            objectPosition: objectPosition }, absolutePositioning) })) : null;
     var width = data.width, aspectRatio = data.aspectRatio;
     var height = data.height || width / aspectRatio;
     var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + width + "\" height=\"" + height + "\"></svg>";
-    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: callbackRef, className: className, style: __assign({ display: explicitWidth ? "inline-block" : "block", overflow: "hidden", position: "relative" }, style) },
+    var sizer = layout !== 'fill' ? (React.createElement("img", { className: pictureClassName, style: {
+            display: 'block',
+            width: '100%'
+        }, src: "data:image/svg+xml;base64," + universalBtoa(svg), role: "presentation" })) : null;
+    return (React.createElement("div", { ref: callbackRef, className: className, style: __assign(__assign({ overflow: 'hidden' }, (layout === 'fill'
+            ? absolutePositioning
+            : layout === 'intrinsic'
+                ? { position: 'relative', width: '100%', maxWidth: width }
+                : layout === 'fixed'
+                    ? { position: 'relative', width: width }
+                    : { position: 'relative', width: '100%' })), style) },
         sizer,
@@ -102,3 +113,4 @@ placeholder,
             regularSource,
-            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 }) })))),
+            data.src && (React.createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit,
+                    objectPosition: objectPosition }), pictureStyle) })))),
         React.createElement("noscript", null,
@@ -108,4 +120,4 @@ React.createElement("picture", null,
                 regularSource,
-                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" }))))));
+                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

@@ -1,3 +0,3 @@
-import React from "react";
-import "intersection-observer";
+import React, { CSSProperties } from 'react';
+import 'intersection-observer';
 export declare type ResponsiveImageType = {
@@ -48,4 +48,17 @@ /** The aspect ratio (width/height) of the image */
     pictureStyle?: React.CSSProperties;
-    /** Whether the image wrapper should explicitely declare the width of the image or keep it fluid */
-    explicitWidth?: boolean;
+    /**
+     * The layout behavior of the image as the viewport changes size
+     *
+     * Possible values:
+     *
+     * * `intrinsic` (default): the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
+     * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
+     * * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
+     * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
+     * */
+    layout?: 'intrinsic' | 'fixed' | 'responsive' | 'fill';
+    /** Defines how the image will fit into its parent container when using layout="fill" */
+    objectFit?: CSSProperties['objectFit'];
+    /** Defines how the image is positioned within its parent element when using layout="fill". */
+    objectPosition?: CSSProperties['objectPosition'];
     /** Triggered when the image finishes loading */
@@ -52,0 +65,0 @@ onLoad?(): void;

package.json

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

README.md

@@ -240,17 +240,37 @@ # react-datocms
 
-| prop                  | type                     | required           | description                                                                                                                                                                                                                                                                                   | default           |
-| --------------------- | ------------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
-| data                  | `ResponsiveImage` object | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query.                                                                                                                                                                                                                   |                   |
-| className             | string                   | :x:                | Additional CSS className for root node                                                                                                                                                                                                                                                        | null              |
-| style                 | CSS properties           | :x:                | Additional CSS rules to add to the root node                                                                                                                                                                                                                                                  | null              |
-| pictureClassName      | string                   | :x:                | Additional CSS class for the image inside the inner `<picture />` tag                                                                                                                                                                                                                         | null              |
-| pictureStyle          | CSS properties           | :x:                | Additional CSS rules to add to the image inside the inner `<picture />` tag                                                                                                                                                                                                                   | null              |
-| fadeInDuration        | integer                  | :x:                | Duration (in ms) of the fade-in transition effect upoad image loading                                                                                                                                                                                                                         | 500               |
-| intersectionThreshold | float                    | :x:                | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. | 0                 |
-| 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:                | 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              |
+| prop                  | type                                             | required           | description                                                                                                                                                                                                                                                                                   | default           |
+| --------------------- | ------------------------------------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| data                  | `ResponsiveImage` object                         | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query                                                                                                                                                                                                                    |                   |
+| layout                | 'intrinsic' \| 'fixed' \| 'responsive' \| 'fill' | :x:                | The layout behavior of the image as the viewport changes size                                                                                                                                                                                                                                 | "intrinsic"       |
+| className             | string                                           | :x:                | Additional CSS className for root node                                                                                                                                                                                                                                                        | null              |
+| style                 | CSS properties                                   | :x:                | Additional CSS rules to add to the root node                                                                                                                                                                                                                                                  | null              |
+| pictureClassName      | string                                           | :x:                | Additional CSS class for the image inside the inner `<picture />` tag                                                                                                                                                                                                                         | null              |
+| pictureStyle          | CSS properties                                   | :x:                | Additional CSS rules to add to the image inside the inner `<picture />` tag                                                                                                                                                                                                                   | null              |
+| fadeInDuration        | integer                                          | :x:                | Duration (in ms) of the fade-in transition effect upoad image loading                                                                                                                                                                                                                         | 500               |
+| intersectionThreshold | float                                            | :x:                | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. | 0                 |
+| 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:                | Whether enable lazy loading or not                                                                                                                                                                                                                                                            | true              |
+| 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              |
 
+
+### Layout mode
+
+With the `layout` property, you can configure the behavior of the image as the viewport changes size:
+
+* When `intrinsic` (default behaviour), the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports.
+* When `fixed`, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native `img` element.
+* When `responsive`, the image will scale the dimensions down for smaller viewports and scale up for larger viewports.
+* When `fill`, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.
+  * This is usually paired with the `objectFit` and `objectPosition` properties.
+  * Ensure the parent element has `position: relative` in their stylesheet.
+
+Example for `layout="fill"` (useful also for background images):
+
+```jsx
+<div style={{ position: 'relative', width: 200, height: 500 }}>
+  <Image data={imageData} layout="fill" objectFit="cover" objectPosition="50% 50%" />
+</div>
+```
+
 ### The `ResponsiveImage` object
@@ -659,2 +679,2 @@
 
-This will re-compile the package everytime you make a change, and the example project will pick those changes instantly.
+This will re-compile the package everytime you make a change, and the example project will pick those changes instantly.

No alert changes

Improved metrics

Total package byte prevSize

164863

increased by3.75%

Lines of code

1822

increased by3.29%

Number of lines in readme file

679

increased by3.19%

No dependency changes