Skip to content

React component to optimize your images based on srcset and add an automatic medium-like blur animation.

Notifications You must be signed in to change notification settings

revolunet/react-srcset-image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-srcset-image

npm package

React component to optimize your images based on srcset and add an automatic medium-like blur animation.

  • Creates srcset images with webpack and responsive-loader.
  • Embed base64 blurred placeholder (default: 100x100)
  • Animate between placeholder and final image

Demo : http://revolunet.github.io/react-srcset-image

⚠️ This component needs webpack to produce multiple images sizes for you.

⚠️ Target images needs to be statically defined.

Usage

import Image from 'react-srcset-image'

// webpack responsive-loader config
const imageSrc = require('responsive-loader?placeholder=true&sizes[]=500,sizes[]=1000!./image.jpg');

const Demo = () => <Image responsiveImage={imageSrc}/>

About

React component to optimize your images based on srcset and add an automatic medium-like blur animation.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published