react-progressive-bg-image
Medium style progressive background image for React based on Styled-components.
Demo
- https://react-progressive-bg-image.netlify.com/
- Responsive example: https://michaelhsu.tw/ (https://github.com/evenchange4/michaelhsu.tw/blob/master/src/components/CoverImage.js#L37-L44)
- Img tag example: https://mcslite.netlify.com/ (https://github.com/MCS-Lite/mcs-lite/blob/master/packages/mcs-lite-landing-web/src/components/BackgroundImage/BackgroundImage.js)
Further Reading:
Installation
$ yarn add react-progressive-bg-image styled-components
Requirements
-
node >= 9.4.0
-
yarn >= 1.3.2
-
react
^16.0.0, -
styled-components
^3
Usage
Case 1: Inline-style
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',
}}
/>;
Case 2: With Styled-components
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"
/>;
Property, 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', ## Test
$ yarn run format
$ yarn run eslint
$ yarn run test:watch
Github release / NPM release
$ npm version patch
$ git push
Inspiration
CONTRIBUTING
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
$ yarn run test).