/react-progressive-bg-image

🖼 Medium style progressive background image.

Primary LanguageJavaScript

react-progressive-bg-image

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

Further reading: Reproducing Medium Style Progressive Image Loading for React.

Travis Codecov Status npm package npm downloads license

Dependency Status devDependency Status peerDependency Status

Greenkeeper badge prettier

Demo

DEMO

Installation

$ npm i react-progressive-bg-image styled-components@rc --save
// or
$ yarn add react-progressive-bg-image styled-components@rc

Requirements

  • react ^15.5.4
  • styled-components ^2.0.0-15

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;

  /* Overrided */
  transition: filter 1s linear;
`;

<StyledProgressiveImage
  src={IMAGE}
  placeholder={IMAGEX60}
/>;

Property

Prop Type Required Description
src string yes Origin image
placeholder string yes Small image

Test

$ yarn run format
$ yarn run eslint
$ yarn run test:watch

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