react-placeholder-image

A placeholder image component.

installation

npm install -S @jswork/react-placeholder-image

usage

1. import css

@import "~@jswork/react-placeholder-image/dist/style.css";

// or use sass
@import "~@jswork/react-placeholder-image/dist/style.scss";

// customize your styles:
$react-placeholder-image-options: ()

2. import js

import React from 'react';
import PImg from '../../src/main';
import styled from 'styled-components';

const Container = styled.div`
  width: 80%;
  margin: 30px auto 0;

  img {
    margin: 20px auto;
    vertical-align: middle;
    display: block;
  }
`;

export default () => {
  return (
    <Container>
      <PImg size={100} text='aric' color='FF0000' bg='000000' />
      <PImg size={200} text='Hello World' />
      <PImg width={300} height={100} text='Hello World' color='#ff0000' />
      <PImg text size={200} />
      <div style={{ width: 300, height: 100, margin: '10px auto' }}>
        <PImg text='Hello World' width={300} height={100} devicePixelRatio={2} fullWidth fullHeight />
      </div>
    </Container>
  );
};

preview

• https://afeiship.github.io/react-placeholder-image/

license

Code released under the MIT license.