		@@ -5,2 +5,13 @@ # Change Log

		## [v3.0.0](https://github.com/buildo/react-placeholder/tree/v3.0.0) (2018-05-04)
		[Full Changelog](https://github.com/buildo/react-placeholder/compare/v2.0.0...v3.0.0)

		#### Breaking:

		- Refactor in TypeScript [#69](https://github.com/buildo/react-placeholder/issues/69)

		#### New features:

		- index.d.ts missing 'style' property [#67](https://github.com/buildo/react-placeholder/issues/67)

		## [v2.0.0](https://github.com/buildo/react-placeholder/tree/v2.0.0) (2017-12-20)
		@@ -7,0 +18,0 @@ [Full Changelog](https://github.com/buildo/react-placeholder/compare/v1.0.10...v2.0.0)

lib/index.d.ts

		@@ -1,21 +0,2 @@
		import { ComponentClass, ReactNode, ReactElement } from 'react';

		interface ReactPlaceholderProps {
		// FIXME: children is marked as optional because of https://github.com/Microsoft/TypeScript/issues/8588
		children?: ReactNode,
		ready: boolean,
		delay?: number,
		firstLaunchOnly?: boolean,
		type?: 'text' \| 'media' \| 'textRow' \| 'rect' \| 'round',
		rows?: number,
		color?: string,
		showLoadingAnimation?: boolean,
		customPlaceholder?: ReactNode \| ReactElement<any>
		}

		interface ReactPlaceholderState {
		ready: boolean
		}

		declare const ReactPlaceholder: ComponentClass<ReactPlaceholderProps>;
		import ReactPlaceholder from './ReactPlaceholder';
		export default ReactPlaceholder;

lib/index.js

		@@ -1,14 +0,4 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = undefined;

		var _ReactPlaceholder = require('./ReactPlaceholder');

		var _ReactPlaceholder2 = _interopRequireDefault(_ReactPlaceholder);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		exports.default = _ReactPlaceholder2.default;
		"use strict";
		exports.__esModule = true;
		var ReactPlaceholder_1 = require("./ReactPlaceholder");
		exports["default"] = ReactPlaceholder_1["default"];

lib/placeholders/index.d.ts

		@@ -1,47 +0,11 @@
		import { ComponentClass } from 'react';

		export { TextRow as textRow };
		export { RectShape as rect };
		export { RoundShape as round };
		export { TextBlock as text };
		export { MediaBlock as media };

		interface RectShapeProps {
		color?: string,
		className?: string,
		style?: {}
		}
		export declare const RectShape: ComponentClass<RectShapeProps>;

		interface RoundShapeProps {
		color?: string,
		className?: string,
		style?: {}
		}
		export declare const RoundShape: ComponentClass<RoundShapeProps>;

		interface MediaBlockProps {
		rows: number,
		color: string,
		style?: {},
		className?: string
		}
		export declare const MediaBlock: ComponentClass<MediaBlockProps>;

		interface TextBlockProps {
		rows: number,
		color: string,
		style?: {},
		className?: string,
		lineSpacing?: string \| number
		}
		export declare const TextBlock: ComponentClass<TextBlockProps>;

		interface TextRowProps {
		invisible?: boolean,
		className?: string,
		color?: string,
		style?: {},
		lineSpacing?: string \| number
		}
		export declare const TextRow: ComponentClass<TextRowProps>;
		import TextRow from './TextRow';
		import RoundShape from './RoundShape';
		import RectShape from './RectShape';
		import TextBlock from './TextBlock';
		import MediaBlock from './MediaBlock';
		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;

lib/placeholders/index.js

		@@ -1,41 +0,17 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.media = exports.text = exports.rect = exports.round = exports.textRow = exports.MediaBlock = exports.TextBlock = exports.RectShape = exports.RoundShape = exports.TextRow = undefined;

		var _TextRow2 = require('./TextRow');

		var _TextRow3 = _interopRequireDefault(_TextRow2);

		var _RoundShape2 = require('./RoundShape');

		var _RoundShape3 = _interopRequireDefault(_RoundShape2);

		var _RectShape2 = require('./RectShape');

		var _RectShape3 = _interopRequireDefault(_RectShape2);

		var _TextBlock2 = require('./TextBlock');

		var _TextBlock3 = _interopRequireDefault(_TextBlock2);

		var _MediaBlock2 = require('./MediaBlock');

		var _MediaBlock3 = _interopRequireDefault(_MediaBlock2);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		exports.TextRow = _TextRow3.default;
		// import Card from 'Card';

		exports.RoundShape = _RoundShape3.default;
		exports.RectShape = _RectShape3.default;
		exports.TextBlock = _TextBlock3.default;
		exports.MediaBlock = _MediaBlock3.default;
		var textRow = exports.textRow = _TextRow3.default;
		var round = exports.round = _RoundShape3.default;
		var rect = exports.rect = _RectShape3.default;
		var text = exports.text = _TextBlock3.default;
		var media = exports.media = _MediaBlock3.default;
		"use strict";
		exports.__esModule = true;
		var TextRow_1 = require("./TextRow");
		exports.TextRow = TextRow_1["default"];
		var RoundShape_1 = require("./RoundShape");
		exports.RoundShape = RoundShape_1["default"];
		var RectShape_1 = require("./RectShape");
		exports.RectShape = RectShape_1["default"];
		var TextBlock_1 = require("./TextBlock");
		exports.TextBlock = TextBlock_1["default"];
		var MediaBlock_1 = require("./MediaBlock");
		exports.MediaBlock = MediaBlock_1["default"];
		exports.textRow = TextRow_1["default"];
		exports.round = RoundShape_1["default"];
		exports.rect = RectShape_1["default"];
		exports.text = TextBlock_1["default"];
		exports.media = MediaBlock_1["default"];

123

lib/placeholders/MediaBlock.js

		@@ -1,80 +0,45 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = undefined;

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _class, _temp;

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _TextBlock = require('./TextBlock');

		var _TextBlock2 = _interopRequireDefault(_TextBlock);

		var _RoundShape = require('./RoundShape');

		var _RoundShape2 = _interopRequireDefault(_RoundShape);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var MediaBlock = (_temp = _class = function (_React$Component) {
		_inherits(MediaBlock, _React$Component);

		function MediaBlock() {
		_classCallCheck(this, MediaBlock);

		return _possibleConstructorReturn(this, (MediaBlock.__proto__ \|\| Object.getPrototypeOf(MediaBlock)).apply(this, arguments));
		}

		_createClass(MediaBlock, [{
		key: 'render',
		value: function render() {
		var _props = this.props,
		className = _props.className,
		style = _props.style,
		color = _props.color,
		rows = _props.rows;


		var classes = ['media-block', className].filter(function (c) {
		return c;
		}).join(' ');

		return _react2.default.createElement(
		'div',
		{ className: classes, style: _extends({}, style, { display: 'flex' }) },
		_react2.default.createElement(_RoundShape2.default, {
		color: color,
		style: { minHeight: 55, width: 55, minWidth: 55, marginRight: 10 }
		}),
		_react2.default.createElement(_TextBlock2.default, { color: color, rows: rows })
		);
		"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) \|\| 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 MediaBlock;
		}(_react2.default.Component), _class.propTypes = {
		rows: _propTypes2.default.number.isRequired,
		color: _propTypes2.default.string.isRequired,
		style: _propTypes2.default.object,
		className: _propTypes2.default.string
		}, _temp);
		exports.default = MediaBlock;
		return t;
		};
		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 classes = ['media-block', className].filter(function (c) { return c; }).join(' ');
		return (React.createElement("div", { className: classes, style: __assign({}, style, { display: 'flex' }) },
		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));
		exports["default"] = MediaBlock;

113

lib/placeholders/RectShape.js

		@@ -1,69 +0,46 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = undefined;

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _class, _temp;

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var RectShape = (_temp = _class = function (_React$Component) {
		_inherits(RectShape, _React$Component);

		function RectShape() {
		_classCallCheck(this, RectShape);

		return _possibleConstructorReturn(this, (RectShape.__proto__ \|\| Object.getPrototypeOf(RectShape)).apply(this, arguments));
		}

		_createClass(RectShape, [{
		key: 'render',
		value: function render() {
		var _props = this.props,
		className = _props.className,
		style = _props.style,
		color = _props.color;


		var defaultStyle = {
		backgroundColor: color,
		width: '100%',
		height: '100%',
		marginRight: 10
		};

		var classes = ['rect-shape', className].filter(function (c) {
		return c;
		}).join(' ');

		return _react2.default.createElement('div', { className: classes, style: _extends({}, defaultStyle, style) });
		"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) \|\| 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 RectShape;
		}(_react2.default.Component), _class.propTypes = {
		color: _propTypes2.default.string,
		className: _propTypes2.default.string,
		style: _propTypes2.default.object
		}, _temp);
		exports.default = RectShape;
		return t;
		};
		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) }));
		};
		RectShape.propTypes = {
		color: PropTypes.string,
		className: PropTypes.string,
		style: PropTypes.object
		};
		return RectShape;
		}(React.Component));
		exports["default"] = RectShape;

113

lib/placeholders/RoundShape.js

		@@ -1,69 +0,46 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = undefined;

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _class, _temp;

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var RoundShape = (_temp = _class = function (_React$Component) {
		_inherits(RoundShape, _React$Component);

		function RoundShape() {
		_classCallCheck(this, RoundShape);

		return _possibleConstructorReturn(this, (RoundShape.__proto__ \|\| Object.getPrototypeOf(RoundShape)).apply(this, arguments));
		}

		_createClass(RoundShape, [{
		key: 'render',
		value: function render() {
		var _props = this.props,
		className = _props.className,
		style = _props.style,
		color = _props.color;


		var defaultStyles = {
		backgroundColor: color,
		borderRadius: '500rem',
		width: '100%',
		height: '100%'
		};

		var classes = ['round-shape', className].filter(function (c) {
		return c;
		}).join(' ');

		return _react2.default.createElement('div', { className: classes, style: _extends({}, defaultStyles, style) });
		"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) \|\| 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 RoundShape;
		}(_react2.default.Component), _class.propTypes = {
		color: _propTypes2.default.string,
		className: _propTypes2.default.string,
		style: _propTypes2.default.object
		}, _temp);
		exports.default = RoundShape;
		return t;
		};
		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) }));
		};
		RoundShape.propTypes = {
		color: PropTypes.string.isRequired,
		className: PropTypes.string,
		style: PropTypes.object
		};
		return RoundShape;
		}(React.Component));
		exports["default"] = RoundShape;

168

lib/placeholders/TextBlock.js

		@@ -1,109 +0,63 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = undefined;

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _class, _temp2;

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _TextRow = require('./TextRow');

		var _TextRow2 = _interopRequireDefault(_TextRow);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var TextBlock = (_temp2 = _class = function (_React$Component) {
		_inherits(TextBlock, _React$Component);

		function TextBlock() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, TextBlock);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		"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) \|\| 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 _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TextBlock.__proto__ \|\| Object.getPrototypeOf(TextBlock)).call.apply(_ref, [this].concat(args))), _this), _this.getRowStyle = function (i) {
		var _this$props = _this.props,
		rows = _this$props.rows,
		color = _this$props.color,
		widths = _this$props.widths;


		return {
		backgroundColor: color,
		maxHeight: 100 / (rows * 2 - 1) + '%',
		width: widths[(i + widths.length) % widths.length] + '%'
		};
		}, _this.getRows = function () {
		var _this$props2 = _this.props,
		rows = _this$props2.rows,
		lineSpacing = _this$props2.lineSpacing;

		var range = [].concat(_toConsumableArray(Array(rows)));
		return range.map(function (x, i) {
		return _react2.default.createElement(_TextRow2.default, {
		style: _this.getRowStyle(i),
		lineSpacing: i !== 0 ? lineSpacing : 0,
		key: i
		});
		});
		}, _temp), _possibleConstructorReturn(_this, _ret);
		}

		_createClass(TextBlock, [{
		key: 'render',
		value: function render() {
		var _props = this.props,
		style = _props.style,
		className = _props.className;


		var classes = ['text-block', className].filter(function (c) {
		return c;
		}).join(' ');

		return _react2.default.createElement(
		'div',
		{ className: classes, style: _extends({}, style, { width: '100%' }) },
		this.getRows()
		);
		return t;
		};
		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] + "%"
		};
		};
		_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;
		}
		}]);

		return TextBlock;
		}(_react2.default.Component), _class.propTypes = {
		rows: _propTypes2.default.number.isRequired,
		color: _propTypes2.default.string.isRequired,
		lineSpacing: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
		widths: _propTypes2.default.arrayOf(_propTypes2.default.number),
		style: _propTypes2.default.object,
		className: _propTypes2.default.string
		}, _class.defaultProps = {
		widths: [97, 100, 94, 90, 98, 95, 98, 40]
		}, _temp2);
		exports.default = TextBlock;
		TextBlock.prototype.render = function () {
		var _a = this.props, style = _a.style, className = _a.className;
		var classes = ['text-block', className].filter(function (c) { return c; }).join(' ');
		return (React.createElement("div", { className: classes, style: __assign({}, style, { width: '100%' }) }, 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));
		exports["default"] = TextBlock;

134

lib/placeholders/TextRow.js

		@@ -1,78 +0,58 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = undefined;

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _class, _temp;

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var TextRow = (_temp = _class = function (_React$Component) {
		_inherits(TextRow, _React$Component);

		function TextRow() {
		_classCallCheck(this, TextRow);

		return _possibleConstructorReturn(this, (TextRow.__proto__ \|\| Object.getPrototypeOf(TextRow)).apply(this, arguments));
		}

		_createClass(TextRow, [{
		key: 'render',
		value: function render() {
		var _props = this.props,
		className = _props.className,
		maxHeight = _props.maxHeight,
		color = _props.color,
		lineSpacing = _props.lineSpacing,
		style = _props.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 _react2.default.createElement('div', {
		className: classes,
		style: _extends({}, defaultStyles, style)
		});
		"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) \|\| 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 TextRow;
		}(_react2.default.Component), _class.propTypes = {
		className: _propTypes2.default.string,
		color: _propTypes2.default.string,
		lineSpacing: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
		style: _propTypes2.default.object
		}, _class.defaultProps = {
		lineSpacing: '0.7em'
		}, _temp);
		exports.default = TextRow;
		return t;
		};
		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) }));
		};
		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));
		exports["default"] = TextRow;

248

lib/ReactPlaceholder.js

		@@ -1,135 +0,117 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = undefined;

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _class, _temp2;

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _placeholders = require('./placeholders');

		var placeholders = _interopRequireWildcard(_placeholders);

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var ReactPlaceholder = (_temp2 = _class = function (_React$Component) {
		_inherits(ReactPlaceholder, _React$Component);

		function ReactPlaceholder() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, ReactPlaceholder);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		"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) \|\| 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 _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ReactPlaceholder.__proto__ \|\| Object.getPrototypeOf(ReactPlaceholder)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
		ready: _this.props.ready
		}, _this.getFiller = function () {
		var _this$props = _this.props,
		firstLaunchOnly = _this$props.firstLaunchOnly,
		children = _this$props.children,
		ready = _this$props.ready,
		className = _this$props.className,
		type = _this$props.type,
		customPlaceholder = _this$props.customPlaceholder,
		showLoadingAnimation = _this$props.showLoadingAnimation,
		rest = _objectWithoutProperties(_this$props, ['firstLaunchOnly', 'children', 'ready', 'className', 'type', 'customPlaceholder', 'showLoadingAnimation']);

		var classes = showLoadingAnimation ? ['show-loading-animation', className].filter(function (c) {
		return c;
		}).join(' ') : className;

		if (customPlaceholder && _react2.default.isValidElement(customPlaceholder)) {
		var mergedCustomClasses = [customPlaceholder.props.className, classes].filter(function (c) {
		return c;
		}).join(' ');
		return _react2.default.cloneElement(customPlaceholder, { className: mergedCustomClasses });
		} else if (customPlaceholder) {
		return customPlaceholder;
		}

		var Placeholder = placeholders[type];

		return _react2.default.createElement(Placeholder, _extends({}, rest, { className: classes }));
		}, _this.setNotReady = function () {
		var delay = _this.props.delay;


		if (delay > 0) {
		_this.timeout = setTimeout(function () {
		_this.setState({ ready: false });
		}, delay);
		} else {
		_this.setState({ ready: false });
		}
		}, _this.setReady = function () {
		if (_this.timeout) {
		clearTimeout(_this.timeout);
		}

		if (!_this.state.ready) {
		_this.setState({ ready: true });
		}
		}, _temp), _possibleConstructorReturn(_this, _ret);
		}

		_createClass(ReactPlaceholder, [{
		key: 'render',
		value: function render() {
		return this.state.ready ? this.props.children : this.getFiller();
		return t;
		};
		var __rest = (this && this.__rest) \|\| function (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;
		};
		exports.__esModule = true;
		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;
		if (delay && delay > 0) {
		_this.timeout = window.setTimeout(function () {
		_this.setState({ ready: false });
		}, delay);
		}
		else {
		_this.setState({ ready: false });
		}
		};
		_this.setReady = function () {
		if (_this.timeout) {
		window.clearTimeout(_this.timeout);
		}
		if (!_this.state.ready) {
		_this.setState({ ready: true });
		}
		};
		return _this;
		}
		}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
		if (!this.props.firstLaunchOnly && this.state.ready && !nextProps.ready) {
		this.setNotReady();
		} else if (nextProps.ready) {
		this.setReady();
		}
		}
		}]);

		return ReactPlaceholder;
		}(_react2.default.Component), _class.propTypes = {
		children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.element]).isRequired,
		delay: _propTypes2.default.number,
		ready: _propTypes2.default.bool.isRequired,
		firstLaunchOnly: _propTypes2.default.bool,
		type: _propTypes2.default.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
		rows: _propTypes2.default.number,
		color: _propTypes2.default.string,
		showLoadingAnimation: _propTypes2.default.bool,
		customPlaceholder: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.element])
		}, _class.defaultProps = {
		delay: 0,
		type: 'text',
		color: '#CDCDCD'
		}, _temp2);
		exports.default = ReactPlaceholder;
		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();
		}
		};
		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));
		exports["default"] = ReactPlaceholder;

package.json

		{
		"name": "react-placeholder",
		"version": "2.0.0",
		"version": "3.0.0",
		"description": "A React component to easily replicate your page with nice placeholders while the content is loading",
		@@ -8,9 +8,7 @@ "main": "lib",
		"test": "jest",
		"build": "rm -rf lib && mkdir lib && node-sass src --importer -o lib && babel src -d lib && rsync -a --include '/' --include '.d.ts' --exclude '*' src/ lib/",
		"lint": "scriptoni lint src",
		"lint-fix": "scriptoni lint src --fix",
		"preversion": "npm run lint && npm run test",
		"build": "rm -rf lib && mkdir lib && tsc",
		"preversion": "npm run test",
		"prepublish": "npm run build",
		"update-examples": "styleguidist build && git add docs && git commit -m 'update gh-pages' && git push",
		"start": "styleguidist server",
		"typecheck": "tsc --noEmit",
		"release-version": "smooth-release"
		@@ -36,7 +34,6 @@ },
		"files": [
		"lib",
		"index.d.ts"
		"lib"
		],
		"homepage": "https://github.com/buildo/react-placeholder",
		"typings": "lib/index.d.ts",
		"typings": "lib",
		"dependencies": {
		@@ -46,16 +43,15 @@ "prop-types": "^15.6.0"
		"devDependencies": {
		"babel-cli": "^6.26.0",
		"babel-jest": "^21.2.0",
		"@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",
		"babel-preset-buildo": "^0.1.1",
		"css-loader": "^0.28.5",
		"enzyme": "^3.0.0",
		"enzyme-adapter-react-16": "^1.0.2",
		"eslint-loader": "^1.9.0",
		"extract-text-webpack-plugin": "^1.0.1",
		"enzyme": "^3.2.0",
		"enzyme-adapter-react-16": "^1.1.0",
		"file-loader": "^1.1.5",
		"html-webpack-plugin": "^2.28.0",
		"jest": "^21.2.1",
		"jest-cli": "^21.2.1",
		"node-sass": "4.5.2",
		"jest": "^22",
		"node-sass": "^4.8.3",
		"progress-bar-webpack-plugin": "^1.10.0",
		@@ -65,9 +61,11 @@ "raf": "^3.4.0",
		"react": "^16",
		"react-docgen-typescript": "^1.1.0",
		"react-dom": "^16",
		"react-styleguidist": "^6.0.33",
		"react-test-renderer": "^16.0.0",
		"react-test-renderer": "^16.2.0",
		"sass-loader": "^6.0.6",
		"scriptoni": "^0.7.6",
		"smooth-release": "^8.0.0",
		"url-loader": "^0.5.9",
		"smooth-release": "^8.0.4",
		"ts-jest": "^22",
		"ts-loader": "^2.3.3",
		"typescript": "^2.8.1",
		"webpack": "3.5.5"
		@@ -81,5 +79,15 @@ },
		"setupFiles": [
		"raf/polyfill"
		"raf/polyfill",
		"<rootDir>/tests/setup.js"
		],
		"transform": {
		"^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
		},
		"testRegex": "(.*[.](test))[.](tsx?)$",
		"moduleFileExtensions": [
		"js",
		"ts",
		"tsx"
		]
		}
		}

README.md

		@@ -61,3 +61,3 @@ # React Placeholder

		const awesomePlaceholder (
		const awesomePlaceholder = (
		<div className='my-awesome-placeholder'>
		@@ -64,0 +64,0 @@ <RectShape color='blue' style={{width: 30, height: 80}}/>

lib/reactPlaceholder.css

react-placeholder - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics