react-simple-svg-placeholder/dist/index.es.js

Simple React component for simple SVG placeholder images

import PropTypes from 'prop-types';
import React, { Component } from 'react';

function simpleSvgPlaceholder({
  width = 300,
  height = 150,
  text = `${width}×${height}`,
  fontFamily = 'sans-serif',
  fontWeight = 'bold',
  fontSize = Math.floor(Math.min(width, height) * 0.2),
  dy = fontSize * 0.35,
  bgColor = '#ddd',
  textColor = 'rgba(0,0,0,0.5)',
  dataUri = true,
  charset = 'UTF-8'
} = {}) {
  const str = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
    <rect fill="${bgColor}" width="${width}" height="${height}"/>
    <text fill="${textColor}" font-family="${fontFamily}" font-size="${fontSize}" dy="${dy}" font-weight="${fontWeight}" x="50%" y="50%" text-anchor="middle">${text}</text>
  </svg>`;

  // Thanks to: filamentgroup/directory-encoder
  const cleaned = str
    .replace(/[\t\n\r]/gim, '') // Strip newlines and tabs
    .replace(/\s\s+/g, ' ') // Condense multiple spaces
    .replace(/'/gim, '\\i'); // Normalize quotes

  if (dataUri) {
    const encoded = encodeURIComponent(cleaned)
      .replace(/\(/g, '%28') // Encode brackets
      .replace(/\)/g, '%29');

    return `data:image/svg+xml;charset=${charset},${encoded}`;
  }

  return cleaned;
}

var simpleSvgPlaceholder_1 = simpleSvgPlaceholder;

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

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 _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 inherits = function (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 possibleConstructorReturn = function (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;
};

var defaults$1 = {
  width: 300,
  height: 150,
  bgColor: "#aaa",
  textColor: "#333"
};

var getImgSrc = function getImgSrc() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return simpleSvgPlaceholder_1(_extends({}, defaults$1, props));
};

var ReactSimpleSVGPlaceholder = function (_Component) {
  inherits(ReactSimpleSVGPlaceholder, _Component);

  function ReactSimpleSVGPlaceholder() {
    var _ref;

    var _temp, _this, _ret;

    classCallCheck(this, ReactSimpleSVGPlaceholder);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ReactSimpleSVGPlaceholder.__proto__ || Object.getPrototypeOf(ReactSimpleSVGPlaceholder)).call.apply(_ref, [this].concat(args))), _this), _this.srcString = getImgSrc(_extends({}, _this.props)), _temp), possibleConstructorReturn(_this, _ret);
  }

  createClass(ReactSimpleSVGPlaceholder, [{
    key: "render",
    value: function render() {
      return this.props.returnAsString ? this.srcString : React.createElement("img", { src: this.srcString, alt: "Placeholder" });
    }
  }]);
  return ReactSimpleSVGPlaceholder;
}(Component);
ReactSimpleSVGPlaceholder.propTypes = {
  returnAsString: PropTypes.bool
};

export default ReactSimpleSVGPlaceholder;
export { getImgSrc };
//# sourceMappingURL=index.es.js.map