@jswork/react-placeholder-image v1.0.2

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.