React component for rendering responsive images. Attempts to implement <img srcset=...>
support in non-compliant browsers, otherwize renders the native <img srcset>
. Will eventually support Picture & Source elements.
npm install react-picture
Then use in your react app like so:
var Img = require('react-picture').Image;
...
render: function() {
var imgs = '//placebacon.net/200/150 600w, //placebacon.net/300/300 800w';
return (
<Img alt='Your picture description' srcSet={imgs} extra={{className='myImg'}}/>
);
}
...
The following properties can be passed to the Image component:
alt
- Required and describes your picturesrcSet
- Required and consists of a string formated like srcsetextra
- Optional object which contains properties that will be put on img tag
- Use
<img srcset>
when supported - Implement srcset support for browsers that do not have it, using javascript. Currently missing sizes implementation.
- Implement sizes attribute
- Stable API
- Correct implementation of match method
Verify srcset feature detection- ie8 & up browser support (w/React polyfills only)
- Performance optimizations
Ismorphic support- 100% test coverage
Travis CI
- PictureContainer
- Karma tests
- Picture element
- Source element
- If you are not using react in your app, BBC-News/Imager.js is a very good library
- srcset polyfill borismus/srcset-polyfill
- picture polyfill scottjehl/picturefill
- React's excellent library & documentation
- Ryan Florence's components on github which were stolen to start up (webpack setup, browserify, scripts)
- This excellent article