πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Medium style progressive background image for React based on Styled-components.

Image Loading React

Documentation

react-progressive-bg-image

Medium style progressive background image for React based on Styled-components.

Travis Codecov Status npm package npm downloads

Dependency Status devDependency Status peerDependency Status

prettier license

Demo

DEMO

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).

CHANGELOG

LICENSE

MIT: http://michaelhsu.mit-license.org


You May Also Like