react-progressive-bg-image

Medium style progressive background image for React

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-progressive-bg-image
226303.0.05 years ago5 years agoMinified + gzip package size for react-progressive-bg-image in KB

Readme

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

!Travisbuild-badgebuild !Codecov Statuscodecov-badgecodecov !npm packagenpm-badgenpm !npm downloadsnpm-downloadsnpm
!Dependency Statusdependency-badgedependency !devDependency Statusdevdependency-badgedevdependency !peerDependency Statuspeerdependency-badgepeerdependency
!prettierprettier-badgeprettier !licenselicense-badgelicense

Demo

  • https://react-progressive-bg-image.netlify.com/
  • Responsive example: https://michaelhsu.tw/ Source code
  • Img tag example: https://mcslite.netlify.com/ Source code

DEMO

Further Reading:

  • English Reproducing Medium Style Progressive Image Loading for React.
  • 中文 React Stack 開發體驗與優化策略

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