🖼 Medium style progressive background image.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook feat(npm): upgrade peer style-components to v3 [BREAKING CHANGES] (#82) Jan 30, 2018
docs docs(README): compress gif May 2, 2017
flow-typed/npm feat(npm): upgrade peer style-components to v3 [BREAKING CHANGES] (#82) Jan 30, 2018
images docs(DEMO): update story info & compress image May 2, 2017
src feat(npm): upgrade peer style-components to v3 [BREAKING CHANGES] (#82) Jan 30, 2018
.editorconfig first commit May 2, 2017
.flowconfig feat(npm): upgrade peer style-components to v3 [BREAKING CHANGES] (#82) Jan 30, 2018
.gitignore feat(travis): enable (#1) May 2, 2017
.nvmrc chore(ncu): ncu update & use node 9 (#66) Jan 16, 2018
.travis.yml feat(npm): upgrade peer style-components to v3 [BREAKING CHANGES] (#82) Jan 30, 2018
CHANGELOG.md docs(CHANGELOG): release 3.0.0 Jan 30, 2018
CHANGELOG.old.md feat(npm): upgrade peer style-components to v3 [BREAKING CHANGES] (#82) Jan 30, 2018
LICENSE docs(LICENSE): update year Jan 16, 2018
README.md feat(npm): upgrade peer style-components to v3 [BREAKING CHANGES] (#82) Jan 30, 2018
index.d.ts feat(npm): upgrade peer style-components to v3 [BREAKING CHANGES] (#82) Jan 30, 2018
package.json chore(deps): update storybook monorepo packages (#86) Feb 9, 2018
renovate.json fix(dependency): pinOnlyDevDependencies Jan 25, 2018
setupTests.js feat(npm): upgrade peer style-components to v3 [BREAKING CHANGES] (#82) Jan 30, 2018
yarn.lock chore(deps): update storybook monorepo packages (#86) Feb 9, 2018

README.md

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