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/ [Source code]
- Img tag example: https://mcslite.netlify.com/ [Source code]
Further Reading:
- [English] Reproducing Medium Style Progressive Image Loading for React.
- [δΈζ] React Stack ιηΌι«ι©θεͺεηη₯
Installation
$ yarn add react-progressive-bg-image styled-componentsRequirements
-
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).
