Skip to content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
flow-typed
pages
src
static
.eslintrc
.flowconfig
.gitignore
.npmignore
.prettierrc
README.md
next.config.js
package.json
rollup.config.js
yarn.lock

README.md

ImgBlur

View Demo

Simple component coupled with a CLI that will lazy load your images w/ a blurry preview.

Install

yarn add imgblur --dev

Usage

The CLI will generate the preview images for you (appended with -tblur):

{
  ...
  "build:img": "imgblur ./static/*"
  ...
}

Then, just use the component with the original path:

<ImgBlur src='/static/sample.jpg' />

The rest is magic. It will lazy load (based on scroll position) with the preview set as the default image to show.

You can’t perform that action at this time.