@jswork/react-placeholder-image
v1.0.2
Published
A placeholder image component.
Downloads
9
Maintainers
Readme
react-placeholder-image
A placeholder image component.
installation
npm install -S @jswork/react-placeholder-image
usage
- 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: ()
- 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.