react-imageblurloader

Image loader using blur.

Usage no npm install needed!

<script type="module">
  import reactImageblurloader from 'https://cdn.skypack.dev/react-imageblurloader';
</script>

README

react-imageblurloader

npm license github-issues

nodei.co

Show a nice blurry preview while your images are loading.

demo

Install

npm install -S react-imageblurloader

Usage

<ImageBlurLoader
  src={ image.url }
  preview='data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEU...'
  width={ 1024 }
  height={ 768 }
/>

Demo

npm start then visit http://127.0.0.1:3000

Generating previews

Using ImageMagick : convert input.jpg -resize 20x20 -quality 70 preview.jpg

Then get the base64 : base64 preview.jpg