react-simple-svg-placeholder

    1.2.2 • Public • Published

    react-simple-svg-placeholder

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

    NPM JavaScript Style Guide

    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

    Install

    npm i react-simple-svg-placeholder

    DownloadsWeekly Downloads

    214

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    22.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • r3smetz
    • tobiasmetz