https://github.com/revolunet/react-srcset-image

React component to optimize your images based on srcset and add an automatic medium-like blur animation.
https://github.com/revolunet/react-srcset-image

image-processing react responsive srcset webpack

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/revolunet/react-srcset-image
• Owner: revolunet
• Created: 2017-05-22T15:38:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-18T01:05:27.000Z (over 7 years ago)
• Last Synced: 2024-10-03T12:24:29.799Z (4 months ago)
• Topics: image-processing, react, responsive, srcset, webpack
• Language: JavaScript
• Homepage: http://revolunet.github.io/react-srcset-image
• Size: 3.33 MB
• Stars: 42
• Watchers: 4
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-srcset-image

[![npm package][npm-badge]][npm]

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](http://github.com/revolunet/responsive-loader).

 - Embed base64 blurred placeholder (default: 100x100)

 - Animate between placeholder and final image

Demo : [http://revolunet.github.io/react-srcset-image](http://revolunet.github.io/react-srcset-image)

:warning: This component needs webpack to produce multiple images sizes for you.

:warning: Target images needs to be statically defined.

# Usage

```jsx

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 = () => 

```

[npm-badge]: https://img.shields.io/npm/v/react-srcset-image.png?style=flat-square

[npm]: https://www.npmjs.org/package/react-srcset-image