react-placeholder - npm Package Compare versions

Comparing version 3.0.2 to 4.0.0

CHANGELOG.md

@@ -5,2 +5,9 @@ #  Change Log
 
+## [v4.0.0](https://github.com/buildo/react-placeholder/tree/v4.0.0) (2020-02-29)
+[Full Changelog](https://github.com/buildo/react-placeholder/compare/v3.0.2...v4.0.0)
+
+#### Breaking:
+
+- Warning: componentWillReceiveProps has been renamed, and is not recommended for use. [#83](https://github.com/buildo/react-placeholder/issues/83)
+
 ## [v3.0.2](https://github.com/buildo/react-placeholder/tree/v3.0.2) (2019-02-21)
@@ -7,0 +14,0 @@ [Full Changelog](https://github.com/buildo/react-placeholder/compare/v3.0.1...v3.0.2)

lib/placeholders/index.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import TextRow from './TextRow';
@@ -7,6 +8,6 @@ import RoundShape from './RoundShape';
 export { TextRow, RoundShape, RectShape, TextBlock, MediaBlock };
-export declare const textRow: typeof TextRow;
-export declare const round: typeof RoundShape;
-export declare const rect: typeof RectShape;
-export declare const text: typeof TextBlock;
-export declare const media: typeof MediaBlock;
+export declare const textRow: import("react").FunctionComponent<import("./TextRow").Props>;
+export declare const round: import("react").FunctionComponent<import("./RoundShape").Props>;
+export declare const rect: import("react").FunctionComponent<import("./RectShape").Props>;
+export declare const text: import("react").FunctionComponent<import("./TextBlock").Props>;
+export declare const media: import("react").FunctionComponent<import("./MediaBlock").Props>;

lib/placeholders/MediaBlock.d.ts

 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 export declare type Props = {
@@ -9,10 +8,3 @@ rows: number;
 };
-export default class MediaBlock extends React.Component<Props> {
-    static propTypes: {
-        rows: PropTypes.Validator<number>;
-        color: PropTypes.Validator<string>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
-    };
-    render(): JSX.Element;
-}
+declare const MediaBlock: React.FC<Props>;
+export default MediaBlock;

lib/placeholders/MediaBlock.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var 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 function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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;
     };
-})();
-var __assign = (this && this.__assign) || Object.assign || function(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);
 };
 exports.__esModule = true;
 var React = require("react");
-var PropTypes = require("prop-types");
 var TextBlock_1 = require("./TextBlock");
 var RoundShape_1 = require("./RoundShape");
-var MediaBlock = /** @class */ (function (_super) {
-    __extends(MediaBlock, _super);
-    function MediaBlock() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MediaBlock.prototype.render = function () {
-        var _a = this.props, className = _a.className, style = _a.style, color = _a.color, rows = _a.rows;
-        var defaultStyles = {
-            display: 'flex'
-        };
-        var classes = ['media-block', className].filter(function (c) { return c; }).join(' ');
-        return (React.createElement("div", { className: classes, style: __assign({}, defaultStyles, style) },
-            React.createElement(RoundShape_1["default"], { color: color, style: { minHeight: 55, width: 55, minWidth: 55, marginRight: 10 } }),
-            React.createElement(TextBlock_1["default"], { color: color, rows: rows })));
-    };
-    MediaBlock.propTypes = {
-        rows: PropTypes.number.isRequired,
-        color: PropTypes.string.isRequired,
-        style: PropTypes.object,
-        className: PropTypes.string
-    };
-    return MediaBlock;
-}(React.Component));
+var utils_1 = require("../utils");
+var defaultStyles = {
+    display: 'flex'
+};
+var MediaBlock = function (_a) {
+    var className = _a.className, style = _a.style, color = _a.color, rows = _a.rows;
+    return (React.createElement("div", { className: utils_1.joinClassNames('media-block', className), style: __assign(__assign({}, defaultStyles), style) },
+        React.createElement(RoundShape_1["default"], { color: color, style: { minHeight: 55, width: 55, minWidth: 55, marginRight: 10 } }),
+        React.createElement(TextBlock_1["default"], { color: color, rows: rows })));
+};
 exports["default"] = MediaBlock;

lib/placeholders/RectShape.d.ts

 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 export declare type Props = {
@@ -8,9 +7,3 @@ color?: string;
 };
-export default class RectShape extends React.Component<Props> {
-    static propTypes: {
-        color: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-    };
-    render(): JSX.Element;
-}
+declare const RectShape: React.FC<Props>;
+export default RectShape;

lib/placeholders/RectShape.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var 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 function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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;
     };
-})();
-var __assign = (this && this.__assign) || Object.assign || function(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);
 };
 exports.__esModule = true;
 var React = require("react");
-var PropTypes = require("prop-types");
-var RectShape = /** @class */ (function (_super) {
-    __extends(RectShape, _super);
-    function RectShape() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RectShape.prototype.render = function () {
-        var _a = this.props, className = _a.className, style = _a.style, color = _a.color;
-        var defaultStyle = {
-            backgroundColor: color,
-            width: '100%',
-            height: '100%',
-            marginRight: 10
-        };
-        var classes = ['rect-shape', className].filter(function (c) { return c; }).join(' ');
-        return (React.createElement("div", { className: classes, style: __assign({}, defaultStyle, style) }));
+var utils_1 = require("../utils");
+var RectShape = function (_a) {
+    var className = _a.className, style = _a.style, color = _a.color;
+    var defaultStyle = {
+        backgroundColor: color,
+        width: '100%',
+        height: '100%',
+        marginRight: 10
     };
-    RectShape.propTypes = {
-        color: PropTypes.string,
-        className: PropTypes.string,
-        style: PropTypes.object
-    };
-    return RectShape;
-}(React.Component));
+    return (React.createElement("div", { className: utils_1.joinClassNames('rect-shape', className), style: __assign(__assign({}, defaultStyle), style) }));
+};
 exports["default"] = RectShape;

lib/placeholders/RoundShape.d.ts

 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 export declare type Props = {
@@ -8,9 +7,3 @@ color: string;
 };
-export default class RoundShape extends React.Component<Props> {
-    static propTypes: {
-        color: PropTypes.Validator<string>;
-        className: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-    };
-    render(): JSX.Element;
-}
+declare const RoundShape: React.FC<Props>;
+export default RoundShape;

lib/placeholders/RoundShape.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var 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 function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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;
     };
-})();
-var __assign = (this && this.__assign) || Object.assign || function(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);
 };
 exports.__esModule = true;
 var React = require("react");
-var PropTypes = require("prop-types");
-var RoundShape = /** @class */ (function (_super) {
-    __extends(RoundShape, _super);
-    function RoundShape() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RoundShape.prototype.render = function () {
-        var _a = this.props, className = _a.className, style = _a.style, color = _a.color;
-        var defaultStyles = {
-            backgroundColor: color,
-            borderRadius: '500rem',
-            width: '100%',
-            height: '100%'
-        };
-        var classes = ['round-shape', className].filter(function (c) { return c; }).join(' ');
-        return (React.createElement("div", { className: classes, style: __assign({}, defaultStyles, style) }));
+var utils_1 = require("../utils");
+var RoundShape = function (_a) {
+    var className = _a.className, style = _a.style, color = _a.color;
+    var defaultStyles = {
+        backgroundColor: color,
+        borderRadius: '500rem',
+        width: '100%',
+        height: '100%'
     };
-    RoundShape.propTypes = {
-        color: PropTypes.string.isRequired,
-        className: PropTypes.string,
-        style: PropTypes.object
-    };
-    return RoundShape;
-}(React.Component));
+    return (React.createElement("div", { className: utils_1.joinClassNames('round-shape', className), style: __assign(__assign({}, defaultStyles), style) }));
+};
 exports["default"] = RoundShape;

lib/placeholders/TextBlock.d.ts

 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-export declare type DefaultedProps = Props & {
-    widths: NonNullable<Props['widths']>;
-};
 export declare type Props = {
@@ -14,18 +10,3 @@ rows: number;
 };
-export default class TextBlock extends React.Component<Props> {
-    static propTypes: {
-        rows: PropTypes.Validator<number>;
-        color: PropTypes.Validator<string>;
-        lineSpacing: PropTypes.Requireable<string | number>;
-        widths: PropTypes.Requireable<(number | null)[]>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
-    };
-    static defaultProps: Partial<Props>;
-    getRowStyle: (i: number) => {
-        maxHeight: string;
-        width: string;
-    };
-    getRows: () => JSX.Element[];
-    render(): JSX.Element;
-}
+declare const TextBlock: React.FC<Props>;
+export default TextBlock;

lib/placeholders/TextBlock.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var 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 function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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;
     };
-})();
-var __assign = (this && this.__assign) || Object.assign || function(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);
 };
 exports.__esModule = true;
 var React = require("react");
-var PropTypes = require("prop-types");
 var TextRow_1 = require("./TextRow");
-var TextBlock = /** @class */ (function (_super) {
-    __extends(TextBlock, _super);
-    function TextBlock() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.getRowStyle = function (i) {
-            var _a = _this.props, rows = _a.rows, widths = _a.widths;
-            return {
-                maxHeight: (100 / (rows * 2 - 1)) + "%",
-                width: widths[(i + widths.length) % widths.length] + "%"
-            };
+var utils_1 = require("../utils");
+var defaultStyles = {
+    width: '100%'
+};
+var defaultWidths = [97, 100, 94, 90, 98, 95, 98, 40];
+var TextBlock = function (_a) {
+    var rows = _a.rows, lineSpacing = _a.lineSpacing, color = _a.color, style = _a.style, className = _a.className, _b = _a.widths, widths = _b === void 0 ? defaultWidths : _b;
+    var getRowStyle = function (i) {
+        return {
+            maxHeight: 100 / (rows * 2 - 1) + "%",
+            width: widths[(i + widths.length) % widths.length] + "%"
         };
-        _this.getRows = function () {
-            var _a = _this.props, rows = _a.rows, lineSpacing = _a.lineSpacing, color = _a.color;
-            var range = Array.apply(null, Array(rows));
-            return range.map(function (_, i) { return (React.createElement(TextRow_1["default"], { color: color, style: _this.getRowStyle(i), lineSpacing: i !== 0 ? lineSpacing : 0, key: i })); });
-        };
-        return _this;
-    }
-    TextBlock.prototype.render = function () {
-        var _a = this.props, style = _a.style, className = _a.className;
-        var defaultStyles = {
-            width: '100%'
-        };
-        var classes = ['text-block', className].filter(function (c) { return c; }).join(' ');
-        return (React.createElement("div", { className: classes, style: __assign({}, defaultStyles, style) }, this.getRows()));
     };
-    TextBlock.propTypes = {
-        rows: PropTypes.number.isRequired,
-        color: PropTypes.string.isRequired,
-        lineSpacing: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number
-        ]),
-        widths: PropTypes.arrayOf(PropTypes.number),
-        style: PropTypes.object,
-        className: PropTypes.string
-    };
-    TextBlock.defaultProps = {
-        widths: [97, 100, 94, 90, 98, 95, 98, 40]
-    };
-    return TextBlock;
-}(React.Component));
+    return (React.createElement("div", { className: utils_1.joinClassNames('text-block', className), style: __assign(__assign({}, defaultStyles), style) }, Array.apply(null, Array(rows)).map(function (_, i) { return (React.createElement(TextRow_1["default"], { color: color, style: getRowStyle(i), lineSpacing: i !== 0 ? lineSpacing : 0, key: i })); })));
+};
 exports["default"] = TextBlock;

lib/placeholders/TextRow.d.ts

 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 export declare type Props = {
     maxHeight?: string | number;
-    invisible?: boolean;
     className?: string;
@@ -11,14 +9,3 @@ color: string;
 };
-export default class TextRow extends React.Component<Props> {
-    static propTypes: {
-        maxHeight: PropTypes.Requireable<string | number>;
-        className: PropTypes.Requireable<string>;
-        color: PropTypes.Validator<string>;
-        lineSpacing: PropTypes.Requireable<string | number>;
-        style: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        lineSpacing: string;
-    };
-    render(): JSX.Element;
-}
+declare const TextRow: React.FC<Props>;
+export default TextRow;

lib/placeholders/TextRow.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var 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 function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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;
     };
-})();
-var __assign = (this && this.__assign) || Object.assign || function(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);
 };
 exports.__esModule = true;
 var React = require("react");
-var PropTypes = require("prop-types");
-var TextRow = /** @class */ (function (_super) {
-    __extends(TextRow, _super);
-    function TextRow() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TextRow.prototype.render = function () {
-        var _a = this.props, className = _a.className, maxHeight = _a.maxHeight, color = _a.color, lineSpacing = _a.lineSpacing, style = _a.style;
-        var defaultStyles = {
-            maxHeight: maxHeight,
-            width: '100%',
-            height: '1em',
-            backgroundColor: color,
-            marginTop: lineSpacing
-        };
-        var classes = ['text-row', className].filter(function (c) { return c; }).join(' ');
-        return (React.createElement("div", { className: classes, style: __assign({}, defaultStyles, style) }));
+var utils_1 = require("../utils");
+var TextRow = function (_a) {
+    var className = _a.className, maxHeight = _a.maxHeight, color = _a.color, lineSpacing = _a.lineSpacing, style = _a.style;
+    var defaultStyles = {
+        maxHeight: maxHeight,
+        width: '100%',
+        height: '1em',
+        backgroundColor: color,
+        marginTop: lineSpacing || '0.7em'
     };
-    TextRow.propTypes = {
-        maxHeight: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number
-        ]),
-        className: PropTypes.string,
-        color: PropTypes.string.isRequired,
-        lineSpacing: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number
-        ]),
-        style: PropTypes.object
-    };
-    TextRow.defaultProps = {
-        lineSpacing: '0.7em'
-    };
-    return TextRow;
-}(React.Component));
+    return (React.createElement("div", { className: utils_1.joinClassNames('text-row', className), style: __assign(__assign({}, defaultStyles), style) }));
+};
 exports["default"] = TextRow;

lib/ReactPlaceholder.d.ts

 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-export declare type CommonProps = {
-    children: React.ReactNode;
+import * as placeholders from './placeholders';
+declare type CommonProps = {
+    children: React.ReactElement | null;
     /** pass `true` when the content is ready and `false` when it's loading */
@@ -14,17 +14,13 @@ ready: boolean;
 };
-export declare type Props = (CommonProps & {
-    /** type of placeholder to use */
-    type: 'text' | 'media' | 'textRow' | 'rect' | 'round';
-    /** number of rows displayed in 'media' and 'text' placeholders */
+declare type PlaceholderProps = CommonProps & {
+    color?: string;
     rows?: number;
-    /** color of the placeholder */
-    color?: string;
-    /** pass true to show a nice loading animation on the placeholder */
     showLoadingAnimation?: boolean;
     customPlaceholder?: undefined;
-}) | (CommonProps & {
+};
+declare type CustomPlaceholderProps = CommonProps & {
     /** pass any renderable content to be used as placeholder instead of the built-in ones */
-    customPlaceholder?: React.ReactNode | React.ReactElement<{
+    customPlaceholder?: React.ReactElement<{
         [k: string]: any;
-    }>;
+    }> | null;
     type?: undefined;
@@ -34,31 +30,20 @@ rows?: undefined;
     showLoadingAnimation?: undefined;
-});
-export default class ReactPlaceholder extends React.Component<Props> {
-    static propTypes: {
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        delay: PropTypes.Requireable<number>;
-        ready: PropTypes.Validator<boolean>;
-        firstLaunchOnly: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<string>;
-        rows: PropTypes.Requireable<number>;
-        color: PropTypes.Requireable<string>;
-        showLoadingAnimation: PropTypes.Requireable<boolean>;
-        customPlaceholder: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        className: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        delay: number;
-        type: string;
-        color: string;
-    };
-    state: {
-        ready: boolean;
-    };
-    timeout?: number;
-    getFiller: () => {};
-    setNotReady: () => void;
-    setReady: () => void;
-    render(): {} | null | undefined;
-    componentWillReceiveProps(nextProps: Props): void;
-}
+};
+declare type MediaPlaceholderProps = PlaceholderProps & Omit<React.ComponentProps<typeof placeholders.media>, 'color' | 'rows' | 'children'> & {
+    type: 'media';
+};
+declare type RectPlaceholderProps = PlaceholderProps & Omit<React.ComponentProps<typeof placeholders.rect>, 'children'> & {
+    type: 'rect';
+};
+declare type RoundPlaceholderProps = PlaceholderProps & Omit<React.ComponentProps<typeof placeholders.round>, 'color' | 'children'> & {
+    type: 'round';
+};
+declare type TextPlaceholderProps = PlaceholderProps & Omit<React.ComponentProps<typeof placeholders.text>, 'color' | 'rows' | 'children'> & {
+    type: 'text';
+};
+declare type TextRowPlaceholderProps = PlaceholderProps & Omit<React.ComponentProps<typeof placeholders.textRow>, 'color' | 'children'> & {
+    type: 'textRow';
+};
+export declare type Props = MediaPlaceholderProps | RectPlaceholderProps | RoundPlaceholderProps | TextRowPlaceholderProps | TextPlaceholderProps | CustomPlaceholderProps;
+declare const ReactPlaceholder: React.FC<Props>;
+export default ReactPlaceholder;

lib/ReactPlaceholder.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var 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 function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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;
     };
-})();
-var __assign = (this && this.__assign) || Object.assign || function(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);
 };
@@ -25,4 +18,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     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;
@@ -32,88 +27,52 @@ };
 var React = require("react");
-var PropTypes = require("prop-types");
 var placeholders = require("./placeholders");
-var ReactPlaceholder = /** @class */ (function (_super) {
-    __extends(ReactPlaceholder, _super);
-    function ReactPlaceholder() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            ready: _this.props.ready
-        };
-        _this.getFiller = function () {
-            var _a = _this.props, firstLaunchOnly = _a.firstLaunchOnly, children = _a.children, ready = _a.ready, className = _a.className, // eslint-disable-line no-unused-vars
-            type = _a.type, customPlaceholder = _a.customPlaceholder, showLoadingAnimation = _a.showLoadingAnimation, rest = __rest(_a, ["firstLaunchOnly", "children", "ready", "className", "type", "customPlaceholder", "showLoadingAnimation"]);
-            var classes = showLoadingAnimation ?
-                ['show-loading-animation', className].filter(function (c) { return c; }).join(' ') :
-                className;
-            if (customPlaceholder && React.isValidElement(customPlaceholder)) {
-                var mergedCustomClasses = [
-                    customPlaceholder.props.className,
-                    classes
-                ].filter(function (c) { return c; }).join(' ');
-                return React.cloneElement(customPlaceholder, { className: mergedCustomClasses });
-            }
-            else if (customPlaceholder) {
-                return customPlaceholder;
-            }
-            var Placeholder = placeholders[type];
-            return React.createElement(Placeholder, __assign({}, rest, { className: classes }));
-        };
-        _this.setNotReady = function () {
-            var delay = _this.props.delay;
+var utils_1 = require("./utils");
+var ReactPlaceholder = function (_a) {
+    var _b = _a.delay, delay = _b === void 0 ? 0 : _b, _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.color, color = _d === void 0 ? '#CDCDCD' : _d, _e = _a.rows, rows = _e === void 0 ? 3 : _e, readyProp = _a.ready, firstLaunchOnly = _a.firstLaunchOnly, children = _a.children, className = _a.className, showLoadingAnimation = _a.showLoadingAnimation, customPlaceholder = _a.customPlaceholder, rest = __rest(_a, ["delay", "type", "color", "rows", "ready", "firstLaunchOnly", "children", "className", "showLoadingAnimation", "customPlaceholder"]);
+    var _f = React.useState(readyProp), ready = _f[0], setReady = _f[1];
+    var timeout = React.useRef(null);
+    var getFiller = function () {
+        var classes = showLoadingAnimation
+            ? utils_1.joinClassNames('show-loading-animation', className)
+            : className;
+        if (customPlaceholder && React.isValidElement(customPlaceholder)) {
+            var mergedCustomClasses = utils_1.joinClassNames(customPlaceholder.props.className, classes);
+            return React.cloneElement(customPlaceholder, {
+                className: mergedCustomClasses
+            });
+        }
+        else if (customPlaceholder) {
+            return customPlaceholder;
+        }
+        var Placeholder = placeholders[type];
+        return (React.createElement(Placeholder, __assign({}, rest, { color: color, rows: rows, className: classes })));
+    };
+    React.useEffect(function () {
+        if (!firstLaunchOnly && ready && !readyProp) {
             if (delay && delay > 0) {
-                _this.timeout = window.setTimeout(function () {
-                    _this.setState({ ready: false });
+                timeout.current = window.setTimeout(function () {
+                    setReady(false);
                 }, delay);
             }
             else {
-                _this.setState({ ready: false });
+                setReady(false);
             }
-        };
-        _this.setReady = function () {
-            if (_this.timeout) {
-                window.clearTimeout(_this.timeout);
+        }
+        else if (readyProp) {
+            if (timeout.current) {
+                window.clearTimeout(timeout.current);
             }
-            if (!_this.state.ready) {
-                _this.setState({ ready: true });
+            if (!ready) {
+                setReady(true);
             }
-        };
-        return _this;
-    }
-    ReactPlaceholder.prototype.render = function () {
-        return this.state.ready ? this.props.children : this.getFiller();
-    };
-    ReactPlaceholder.prototype.componentWillReceiveProps = function (nextProps) {
-        if (!this.props.firstLaunchOnly && this.state.ready && !nextProps.ready) {
-            this.setNotReady();
         }
-        else if (nextProps.ready) {
-            this.setReady();
+    }, [firstLaunchOnly, ready, readyProp, delay]);
+    // clear the timeout when the component unmounts
+    React.useEffect(function () { return function () {
+        if (timeout.current) {
+            window.clearTimeout(timeout.current);
         }
-    };
-    ReactPlaceholder.propTypes = {
-        children: PropTypes.oneOfType([
-            PropTypes.node,
-            PropTypes.element
-        ]).isRequired,
-        delay: PropTypes.number,
-        ready: PropTypes.bool.isRequired,
-        firstLaunchOnly: PropTypes.bool,
-        type: PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
-        rows: PropTypes.number,
-        color: PropTypes.string,
-        showLoadingAnimation: PropTypes.bool,
-        customPlaceholder: PropTypes.oneOfType([
-            PropTypes.node,
-            PropTypes.element
-        ]),
-        className: PropTypes.string,
-        style: PropTypes.object
-    };
-    ReactPlaceholder.defaultProps = {
-        delay: 0,
-        type: 'text',
-        color: '#CDCDCD'
-    };
-    return ReactPlaceholder;
-}(React.Component));
+    }; }, []);
+    return ready ? children : getFiller();
+};
 exports["default"] = ReactPlaceholder;

package.json

 {
   "name": "react-placeholder",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "description": "A React component to easily replicate your page with nice placeholders while the content is loading",
@@ -37,37 +37,39 @@ "main": "lib",
   "typings": "lib",
-  "dependencies": {
-    "prop-types": "^15.6.0"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@types/enzyme": "2.8.6",
-    "@types/jest": "^22",
-    "@types/node": "9.6.4",
-    "@types/prop-types": "^15.5.2",
-    "@types/react": "^16.3.10",
-    "babel-loader": "^7.1.2",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.4.0",
+    "@types/enzyme": "^3.10.4",
+    "@types/jest": "^24.0.23",
+    "@types/lodash": "^4.14.149",
+    "@types/node": "12.12.17",
+    "@types/react": "^16.9.16",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
     "babel-preset-buildo": "^0.1.1",
-    "css-loader": "^0.28.5",
-    "enzyme": "^3.2.0",
-    "enzyme-adapter-react-16": "^1.1.0",
-    "file-loader": "^1.1.5",
-    "jest": "^22",
-    "node-sass": "^4.8.3",
-    "progress-bar-webpack-plugin": "^1.10.0",
-    "raf": "^3.4.0",
+    "css-loader": "^0.28.11",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "file-loader": "^1.1.11",
+    "jest": "^24.9.0",
+    "lodash": "^4.17.15",
+    "node-sass": "^4.13.0",
+    "progress-bar-webpack-plugin": "^1.12.1",
+    "raf": "^3.4.1",
     "raw-loader": "^0.5.1",
-    "react": "^16",
-    "react-docgen-typescript": "^1.1.0",
-    "react-dom": "^16",
+    "react": "^16.8.0",
+    "react-docgen-typescript": "^1.16.1",
+    "react-dom": "^16.8.0",
     "react-styleguidist": "^6.0.33",
-    "react-test-renderer": "^16.2.0",
-    "sass-loader": "^6.0.6",
-    "smooth-release": "^8.0.4",
-    "ts-jest": "^22",
-    "ts-loader": "^2.3.3",
-    "typescript": "^2.8.1",
+    "react-test-renderer": "^16.8.0",
+    "sass-loader": "^6.0.7",
+    "smooth-release": "^8.0.9",
+    "ts-jest": "^24.2.0",
+    "ts-loader": "^3.5.0",
+    "typescript": "~3.6.4",
     "webpack": "3.5.5"
   },
   "peerDependencies": {
-    "react": "^0.14 || ^15 || ^16",
-    "react-dom": "^0.14 || ^15 || ^16"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
@@ -81,3 +83,3 @@ "jest": {
     "transform": {
-      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+      "^.+\\.tsx?$": "ts-jest"
     },
@@ -84,0 +86,0 @@ "testRegex": "(.*[.](test))[.](tsx?)$",

README.md

@@ -29,20 +29,18 @@ # React Placeholder
 
-```jsx
-children:             PropTypes.oneOfType([
-                         PropTypes.node,
-                         PropTypes.element
-                      ]).isRequired,
-ready:                PropTypes.bool.isRequired,
-delay:                PropTypes.number,
-firstLaunchOnly:      PropTypes.bool,
-showLoadingAnimation: PropTypes.bool,
-type:                 PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
-rows:                 PropTypes.number,
-color:                PropTypes.string,
-customPlaceholder:    PropTypes.oneOfType([
-                         PropTypes.node,
-                         PropTypes.element
-                      ])
+```tsx
+children:              ReactElement | null;
+ready:                 boolean;
+delay?:                number;
+firstLaunchOnly?:      boolean;
+showLoadingAnimation?: boolean;
+type?:                 'text' | 'media' | 'textRow' | 'rect' | 'round';
+rows?:                 number;
+color?:                string;
+customPlaceholder?:    ReactElement;
+className?:            string;
+style?:                CSSProperties;
 ```
 
+The default props will render a `text` placeholder with `3` rows and the color `#CDCDCD`.
+
 ### Customization
@@ -49,0 +47,0 @@ If the built-in set of placeholders is not enough, you can pass you own through the prop **"customPlaceholder"**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Number of package files

23

increased by9.52%

Worsened metrics

Total package byte prevSize

27820

decreased by-22.27%

Dev dependency count

31

increased by14.81%

Lines of code

365

decreased by-38.03%

Number of lines in readme file

98

decreased by-2%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• - Removedprop-types@^15.6.0