react-simple-svg-placeholder

Simple React component for simple SVG placeholder images based on the awesome Cloudfour Simple SVG Placeholder

Install

npm install --save react-simple-svg-placeholder

yarn add react-simple-svg-placeholder

Usage

Default

import React from "react";

import PlaceholderImage from "react-simple-svg-placeholder";

const Example = () => <PlaceholderImage width={300} height={150} />;

With an Object

import React from "react";

import PlaceholderImage from "react-simple-svg-placeholder";

const Example = () => {
  const placeholderSettings = {
    width: 300,
    height: 150,
    bgColor: "#aaa",
    textColor: "#333",
  };

  return <PlaceholderImage {...placeholderSettings} />;
};

Prop Reference

width {Number}

Defaults to 300, the default width of SVG elements in most browsers.

height {Number}

Defaults to 150, the default height of SVG elements in most browsers.

returnAsString {Boolean}

Defaults to false, toggles if the component only returns the source-string or an actual <img>
Please also watch the "getImgSrc Function"-section below

text {String}

The text to display. Defaults to the image dimensions.

fontFamily {String}

The font to use for the text. For data URIs, this needs to be a system-installed font. Defaults to 'sans-serif'.

fontWeight {String}

Defaults to 'bold'.

fontSize {Number}

Defaults to 20% of the shortest image dimension, rounded down.

bgColor {String}

The background color of the image. Defaults to #ddd.

textColor {String}

The color of the text. For transparency, use an rgba or hsla color value. Defaults to rgba(0,0,0,0.5).

charset {String}

Defaults to UTF-8, but if your source HTML document's character set is different, you may want to update this to match.

getImgSrc Function

If you only want to generate an image-src you don't need to use a react-component.
You can use the getImgSrc-function of this project.
The defaults and props-usage is the same as in the react-component.

import { getImgSrc } from "react-simple-svg-placeholder";

const imgSrcWithDefaults = getImgSrc();
const imgSrcWithWidth = getImgSrc({ width: 800 });

License

MIT © r3sMetz