πΌ Medium style progressive background image.
MIT License
Medium style progressive background image for React based on Styled-components.
$ yarn add react-progressive-bg-image styled-components
node >= 9.4.0
yarn >= 1.3.2
react ^16.0.0
,
styled-components ^3
Remind: May need to setup autoprefixer in your project.
import ProgressiveImage from 'react-progressive-bg-image';
<ProgressiveImage
src={image1}
placeholder={image1X60}
style={{
height: 600,
backgroundSize: 'contain',
backgroundPosition: 'center center',
}}
/>;
import styled from 'styled-components';
import ProgressiveImage from 'react-progressive-bg-image';
const StyledProgressiveImage = styled(ProgressiveImage)`
height: 600px;
background-size: contain;
background-position: center center;
`;
<StyledProgressiveImage
src={IMAGE}
placeholder={IMAGEX60}
transition="all 1s linear"
/>;
Prop | Type | Required | Description |
---|---|---|---|
src |
string | yes | Origin image |
placeholder |
string | yes | Small image (Suggest inline base64) |
opacity |
number | default: 0.5 | |
blur |
number | default: 20 | |
scale |
number | default: 1 | |
transition |
string | default: 'opacity 0.3s linear' | |
component |
string | default: 'div' |
$ yarn run format
$ yarn run eslint
$ yarn run test:watch
$ npm version patch
$ git push
$ yarn run test
).