react-background-image - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

dist/index.d.ts

@@ -1,16 +0,9 @@
-/**
- * @class BackgroundImage
- */
-import * as React from "react";
-export declare type Props = {
+/// <reference types="react" />
+import './styles.scss';
+declare const BackgroundImage: (props: {
     src: string;
     placeholder: string;
-    className?: string;
-    children?: JSX.Element[] | JSX.Element;
-};
-export default class BackgroundImage extends React.Component<Props> {
-    hdImage: React.RefObject<HTMLDivElement>;
-    constructor(props: Props);
-    componentDidMount(): void;
-    render(): JSX.Element;
-}
+    className?: string | undefined;
+    children?: JSX.Element | JSX.Element[] | undefined;
+}) => JSX.Element;
+export default BackgroundImage;

dist/index.js

@@ -1,3 +0,14 @@
-'use strict';
 
+
+function ___$insertStyle(css) {
+    if (!css || typeof window === 'undefined') {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
+}
+
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -7,30 +18,36 @@
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
 
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-/* global Reflect, Promise */
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
 
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
 
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
 
@@ -53,69 +70,30 @@ var __assign = function() {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
+___$insertStyle(".react-bg-img-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.react-bg-img-placeholder {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-position: center;\n  background-size: cover;\n}\n\n.react-bg-img-hd {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-position: center;\n  background-size: cover;\n  opacity: 0;\n  transition: opacity 1s ease;\n}\n\n.react-bg-img-hd-fade-in {\n  opacity: 1;\n}");
 
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css = ".styles_backgroundImageContainer__37Lq2 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.styles_backgroundImagePlaceholder__34JD0 {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-position: center;\n  background-size: cover;\n}\n\n.styles_backgroundImageHd__tJ4b- {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-position: center;\n  background-size: cover;\n  opacity: 0;\n  transition: opacity 1s ease;\n}\n\n.styles_backgroundImageHdFadeIn__3XRSC {\n  opacity: 1;\n}\n";
-var styles = {"backgroundImageContainer":"styles_backgroundImageContainer__37Lq2","backgroundImagePlaceholder":"styles_backgroundImagePlaceholder__34JD0","backgroundImageHd":"styles_backgroundImageHd__tJ4b-","backgroundImageHdFadeIn":"styles_backgroundImageHdFadeIn__3XRSC"};
-styleInject(css);
-
-/**
- * @class BackgroundImage
- */
-var BackgroundImage = /** @class */ (function (_super) {
-    __extends(BackgroundImage, _super);
-    function BackgroundImage(props) {
-        var _this = _super.call(this, props) || this;
-        _this.hdImage = React.createRef();
-        return _this;
-    }
-    BackgroundImage.prototype.componentDidMount = function () {
-        var _this = this;
-        var newImage = document.createElement("img");
-        var hdImageRef = this.hdImage.current; // Using ! to remove undefined/null from type definition
-        newImage.src = this.props.src;
+var BackgroundImage = function (props) {
+    var hdImage = React.createRef();
+    var placeholder = props.placeholder, className = props.className, src = props.src, children = props.children, rest = __rest(props, ["placeholder", "className", "src", "children"]);
+    React.useEffect(function () {
+        var newImage = document.createElement('img');
+        var hdImageRef = hdImage.current;
+        newImage.src = src;
         newImage.onload = function () {
-            hdImageRef.setAttribute("style", "background-image: url('" + _this.props.src + "')");
-            hdImageRef.classList.add("" + styles.backgroundImageHdFadeIn);
+            hdImageRef.setAttribute('style', "background-image: url('".concat(src, "')"));
+            hdImageRef.classList.add('react-bg-img-hd-fade-in');
         };
-    };
-    BackgroundImage.prototype.render = function () {
-        var _a = this.props, placeholder = _a.placeholder, className = _a.className, children = _a.children, rest = __rest(_a, ["placeholder", "className", "children"]);
-        return (React.createElement("div", __assign({ className: styles.backgroundImageContainer + " " + (className ? className : "") }, rest),
-            React.createElement("div", { className: styles.backgroundImageHd, ref: this.hdImage }),
-            React.createElement("div", { className: styles.backgroundImagePlaceholder, style: { backgroundImage: "url('" + placeholder + "')" } }),
-            children));
-    };
-    return BackgroundImage;
-}(React.Component));
+    }, []);
+    return (React__namespace.createElement("div", __assign({ className: "react-bg-img-container ".concat(className ? className : '') }, rest),
+        React__namespace.createElement("div", { className: 'react-bg-img-hd', ref: hdImage }),
+        React__namespace.createElement("div", { className: 'react-bg-img-placeholder', style: { backgroundImage: "url('".concat(placeholder, "')") } }),
+        children));
+};
 
-exports.default = BackgroundImage;
+exports["default"] = BackgroundImage;
 //# sourceMappingURL=index.js.map

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/tslib/tslib.es6.js","../node_modules/style-inject/dist/style-inject.es.js","../src/index.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)\r\n            t[p[i]] = s[p[i]];\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (_) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator], i = 0;\r\n    if (m) return m.call(o);\r\n    return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n    result.default = mod;\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","/**\r\n * @class BackgroundImage\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport styles from \"./styles.css\";\r\n\r\nexport type Props = {\r\n  src: string;\r\n  placeholder: string;\r\n  className?: string;\r\n  children?: JSX.Element[] | JSX.Element;\r\n};\r\n\r\nexport default class BackgroundImage extends React.Component<Props> {\r\n  hdImage: React.RefObject<HTMLDivElement>;\r\n\r\n  constructor(props: Props) {\r\n    super(props);\r\n    this.hdImage = React.createRef();\r\n  }\r\n\r\n  componentDidMount() {\r\n    const newImage = document.createElement(\"img\");\r\n    const hdImageRef = this.hdImage.current!; // Using ! to remove undefined/null from type definition\r\n    newImage.src = this.props.src;\r\n    newImage.onload = () => {\r\n      hdImageRef.setAttribute(\r\n        \"style\",\r\n        `background-image: url('${this.props.src}')`\r\n      );\r\n      hdImageRef.classList.add(`${styles.backgroundImageHdFadeIn}`);\r\n    };\r\n  }\r\n\r\n  render() {\r\n    const { placeholder, className, children, ...rest } = this.props;\r\n    return (\r\n      <div\r\n        className={`${styles.backgroundImageContainer} ${\r\n          className ? className : \"\"\r\n        }`}\r\n        {...rest}\r\n      >\r\n        <div className={styles.backgroundImageHd} ref={this.hdImage} />\r\n        <div\r\n          className={styles.backgroundImagePlaceholder}\r\n          style={{ backgroundImage: `url('${placeholder}')` }}\r\n        />\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["tslib_1.__extends","React.createRef","React.createElement","React.Component"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, createRef } from 'react';\nimport './styles.scss';\n\nconst BackgroundImage = (props: {\n  src: string;\n  placeholder: string;\n  className?: string;\n  children?: JSX.Element[] | JSX.Element;\n}) => {\n  const hdImage = createRef<HTMLDivElement>();\n  const { placeholder, className, src, children, ...rest } = props;\n\n  useEffect(() => {\n    const newImage = document.createElement('img');\n    const hdImageRef = hdImage.current!;\n    newImage.src = src;\n    newImage.onload = () => {\n      hdImageRef.setAttribute('style', `background-image: url('${src}')`);\n      hdImageRef.classList.add('react-bg-img-hd-fade-in');\n    };\n  }, []);\n\n  return (\n    <div\n      className={`react-bg-img-container ${className ? className : ''}`}\n      {...rest}\n    >\n      <div className='react-bg-img-hd' ref={hdImage} />\n      <div\n        className='react-bg-img-placeholder'\n        style={{ backgroundImage: `url('${placeholder}')` }}\n      />\n      {children}\n    </div>\n  );\n};\n\nexport default BackgroundImage;\n"],"names":["createRef","useEffect","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIM,IAAA,eAAe,GAAG,UAAC,KAKxB,EAAA;AACC,IAAA,IAAM,OAAO,GAAGA,eAAS,EAAkB,CAAC;IACpC,IAAA,WAAW,GAAwC,KAAK,CAA7C,WAAA,EAAE,SAAS,GAA6B,KAAK,CAAA,SAAlC,EAAE,GAAG,GAAwB,KAAK,IAA7B,EAAE,QAAQ,GAAc,KAAK,CAAnB,QAAA,EAAK,IAAI,GAAA,MAAA,CAAK,KAAK,EAA1D,CAAkD,aAAA,EAAA,WAAA,EAAA,KAAA,EAAA,UAAA,CAAA,CAAF,CAAW;AAEjE,IAAAC,eAAS,CAAC,YAAA;QACR,IAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC/C,QAAA,IAAM,UAAU,GAAG,OAAO,CAAC,OAAQ,CAAC;AACpC,QAAA,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;QACnB,QAAQ,CAAC,MAAM,GAAG,YAAA;YAChB,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,yBAA0B,CAAA,MAAA,CAAA,GAAG,EAAI,IAAA,CAAA,CAAC,CAAC;AACpE,YAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;AACtD,SAAC,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,QACEC,gBACE,CAAA,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,SAAS,EAAE,yBAAA,CAAA,MAAA,CAA0B,SAAS,GAAG,SAAS,GAAG,EAAE,CAAE,IAC7D,IAAI,CAAA;AAER,QAAAA,gBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,OAAO,EAAI,CAAA;AACjD,QAAAA,gBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAA,CAAA,MAAA,CAAQ,WAAW,EAAA,IAAA,CAAI,EAAE,EACnD,CAAA;QACD,QAAQ,CACL,EACN;AACJ;;;;"}

package.json

 {
   "name": "react-background-image",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Display a placeholder image while the real image loads, featuring different preloading and animation options",
@@ -9,4 +9,2 @@ "author": "jonatanramhoj",
   "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "jsnext:main": "dist/index.es.js",
   "engines": {
@@ -17,41 +15,30 @@ "node": ">=8",
   "scripts": {
-    "test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
-    "test:watch": "react-scripts-ts test --env=jsdom",
     "build": "rollup -c",
-    "start": "rollup -c -w",
-    "prepare": "yarn run build",
-    "predeploy": "cd example && yarn install && yarn run build",
-    "deploy": "gh-pages -d example/build"
+    "start": "rollup -c -w"
   },
   "dependencies": {},
   "peerDependencies": {
-    "prop-types": "^15.5.4",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@svgr/rollup": "^2.4.1",
-    "@types/jest": "^23.1.5",
-    "@types/react": "^16.3.13",
-    "@types/react-dom": "^16.0.5",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
-    "cross-env": "^5.1.4",
-    "gh-pages": "^1.2.0",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts-ts": "^2.16.0",
-    "rollup": "^0.62.0",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-typescript2": "^0.17.0",
-    "rollup-plugin-url": "^1.4.0",
-    "typescript": "^2.8.3"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^2.79.1",
+    "rollup-plugin-sass": "^1.12.16",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "typescript": "^4.8.4"
   },
   "files": [
     "dist"
+  ],
+  "keywords": [
+    "react",
+    "typescript",
+    "npm"
   ]
 }

README.md

@@ -21,6 +21,6 @@ # react-background-image
 
-export default class App extends React.Component {
+export default function App () {
   render() {
     return (
-      <main className="main">
+      <div className="main">
         <BackgroundImage
@@ -32,6 +32,6 @@ placeholder={placeholder}
         >
-          <p>Other element</p>
+          <p className="some-class">Other element</p>
           <OtherReactComponent />
         </BackgroundImage>
-      </main>
+      </div>
     );
@@ -43,8 +43,9 @@ }
 ## Props
-| Prop  | Type | Notes | 
-| ------------- | ------------- | ------------- |
-| src  | String  | HD image to load  |
-| placeholder  | String | Placeholder image to be immediately displayed |
-| className  | String | Optional custom css class |
 
+| Prop        | Type   | Notes                                         |
+| ----------- | ------ | --------------------------------------------- |
+| src         | String | HD image to load                              |
+| placeholder | String | Placeholder image to be immediately displayed |
+| className   | String | Optional custom css class                     |
+
 ## Demo
@@ -51,0 +52,0 @@

dist/index.es.js

-import { createRef, createElement, Component } from 'react';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-}
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css = ".styles_backgroundImageContainer__37Lq2 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.styles_backgroundImagePlaceholder__34JD0 {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-position: center;\n  background-size: cover;\n}\n\n.styles_backgroundImageHd__tJ4b- {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-position: center;\n  background-size: cover;\n  opacity: 0;\n  transition: opacity 1s ease;\n}\n\n.styles_backgroundImageHdFadeIn__3XRSC {\n  opacity: 1;\n}\n";
-var styles = {"backgroundImageContainer":"styles_backgroundImageContainer__37Lq2","backgroundImagePlaceholder":"styles_backgroundImagePlaceholder__34JD0","backgroundImageHd":"styles_backgroundImageHd__tJ4b-","backgroundImageHdFadeIn":"styles_backgroundImageHdFadeIn__3XRSC"};
-styleInject(css);
-
-/**
- * @class BackgroundImage
- */
-var BackgroundImage = /** @class */ (function (_super) {
-    __extends(BackgroundImage, _super);
-    function BackgroundImage(props) {
-        var _this = _super.call(this, props) || this;
-        _this.hdImage = createRef();
-        return _this;
-    }
-    BackgroundImage.prototype.componentDidMount = function () {
-        var _this = this;
-        var newImage = document.createElement("img");
-        var hdImageRef = this.hdImage.current; // Using ! to remove undefined/null from type definition
-        newImage.src = this.props.src;
-        newImage.onload = function () {
-            hdImageRef.setAttribute("style", "background-image: url('" + _this.props.src + "')");
-            hdImageRef.classList.add("" + styles.backgroundImageHdFadeIn);
-        };
-    };
-    BackgroundImage.prototype.render = function () {
-        var _a = this.props, placeholder = _a.placeholder, className = _a.className, children = _a.children, rest = __rest(_a, ["placeholder", "className", "children"]);
-        return (createElement("div", __assign({ className: styles.backgroundImageContainer + " " + (className ? className : "") }, rest),
-            createElement("div", { className: styles.backgroundImageHd, ref: this.hdImage }),
-            createElement("div", { className: styles.backgroundImagePlaceholder, style: { backgroundImage: "url('" + placeholder + "')" } }),
-            children));
-    };
-    return BackgroundImage;
-}(Component));
-
-export default BackgroundImage;
-//# sourceMappingURL=index.es.js.map

dist/index.es.js.map

-{"version":3,"file":"index.es.js","sources":["../node_modules/tslib/tslib.es6.js","../node_modules/style-inject/dist/style-inject.es.js","../src/index.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)\r\n            t[p[i]] = s[p[i]];\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (_) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator], i = 0;\r\n    if (m) return m.call(o);\r\n    return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n    result.default = mod;\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","/**\r\n * @class BackgroundImage\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport styles from \"./styles.css\";\r\n\r\nexport type Props = {\r\n  src: string;\r\n  placeholder: string;\r\n  className?: string;\r\n  children?: JSX.Element[] | JSX.Element;\r\n};\r\n\r\nexport default class BackgroundImage extends React.Component<Props> {\r\n  hdImage: React.RefObject<HTMLDivElement>;\r\n\r\n  constructor(props: Props) {\r\n    super(props);\r\n    this.hdImage = React.createRef();\r\n  }\r\n\r\n  componentDidMount() {\r\n    const newImage = document.createElement(\"img\");\r\n    const hdImageRef = this.hdImage.current!; // Using ! to remove undefined/null from type definition\r\n    newImage.src = this.props.src;\r\n    newImage.onload = () => {\r\n      hdImageRef.setAttribute(\r\n        \"style\",\r\n        `background-image: url('${this.props.src}')`\r\n      );\r\n      hdImageRef.classList.add(`${styles.backgroundImageHdFadeIn}`);\r\n    };\r\n  }\r\n\r\n  render() {\r\n    const { placeholder, className, children, ...rest } = this.props;\r\n    return (\r\n      <div\r\n        className={`${styles.backgroundImageContainer} ${\r\n          className ? className : \"\"\r\n        }`}\r\n        {...rest}\r\n      >\r\n        <div className={styles.backgroundImageHd} ref={this.hdImage} />\r\n        <div\r\n          className={styles.backgroundImagePlaceholder}\r\n          style={{ backgroundImage: `url('${placeholder}')` }}\r\n        />\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["tslib_1.__extends","React.createRef","React.createElement","React.Component"],"mappings":";;AAAA;;;;;;;;;;;;;;;;AAgBA,IAAI,aAAa,GAAG,SAAS,CAAC,EAAE,CAAC,EAAE;IAC/B,aAAa,GAAG,MAAM,CAAC,cAAc;SAChC,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC;QAC5E,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/E,OAAO,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC9B,CAAC;;AAEF,AAAO,SAAS,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE;IAC5B,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACpB,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE;IACvC,CAAC,CAAC,SAAS,GAAG,CAAC,KAAK,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;CACxF;;AAED,AAAO,IAAI,QAAQ,GAAG,WAAW;IAC7B,QAAQ,GAAG,MAAM,CAAC,MAAM,IAAI,SAAS,QAAQ,CAAC,CAAC,EAAE;QAC7C,KAAK,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YACjD,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;YACjB,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SAChF;QACD,OAAO,CAAC,CAAC;MACZ;IACD,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;EAC1C;;AAED,AAAO,SAAS,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;IACzB,IAAI,CAAC,GAAG,EAAE,CAAC;IACX,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;QAC/E,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,OAAO,MAAM,CAAC,qBAAqB,KAAK,UAAU;QAC/D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YAC3F,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,OAAO,CAAC,CAAC;CACZ;;AChDD,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;EAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;EAC/B,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;;EAE5B,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;;EAExD,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;EACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;EAC5C,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;;EAExB,IAAI,QAAQ,KAAK,KAAK,EAAE;IACtB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C,MAAM;MACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACzB;GACF,MAAM;IACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GACzB;;EAED,IAAI,KAAK,CAAC,UAAU,EAAE;IACpB,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;GAChC,MAAM;IACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;GACjD;CACF;;;;;;ACzBD;;;AAcA;IAA6CA,mCAAsB;IAGjE,yBAAY,KAAY;QAAxB,YACE,kBAAM,KAAK,CAAC,SAEb;QADC,KAAI,CAAC,OAAO,GAAGC,SAAe,EAAE,CAAC;;KAClC;IAED,2CAAiB,GAAjB;QAAA,iBAWC;QAVC,IAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,IAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,OAAQ,CAAC;QACzC,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QAC9B,QAAQ,CAAC,MAAM,GAAG;YAChB,UAAU,CAAC,YAAY,CACrB,OAAO,EACP,4BAA0B,KAAI,CAAC,KAAK,CAAC,GAAG,OAAI,CAC7C,CAAC;YACF,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,KAAG,MAAM,CAAC,uBAAyB,CAAC,CAAC;SAC/D,CAAC;KACH;IAED,gCAAM,GAAN;QACE,IAAM,eAA0D,EAAxD,4BAAW,EAAE,wBAAS,EAAE,sBAAQ,EAAE,2DAAsB,CAAC;QACjE,QACEC,gCACE,SAAS,EAAK,MAAM,CAAC,wBAAwB,UAC3C,SAAS,GAAG,SAAS,GAAG,EAAE,CAC1B,IACE,IAAI;YAERA,uBAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI;YAC/DA,uBACE,SAAS,EAAE,MAAM,CAAC,0BAA0B,EAC5C,KAAK,EAAE,EAAE,eAAe,EAAE,UAAQ,WAAW,OAAI,EAAE,GACnD;YACD,QAAQ,CACL,EACN;KACH;IACH,sBAAC;CAAA,CAvC4CC,SAAe,GAuC3D;;;;"}

dist/test.d.ts

-export {};

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Mixed license

License

Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

-33.33%

Dev dependency count

10

-50%

Number of low license alerts

0

-100%

Number of lines in readme file

55

1.85%

Worsened metrics

Total package byte prevSize

9510

-79.05%

Number of package files

5

-37.5%

Lines of code

93

-58.67%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes