react-bilde
A universal react component for displaying images. [Updated fork of React Universal Image, prepared for React 16.]
Features
- Lazy load
- Placeholder
- Progressive image loading (as on Medium.com)
- Image error fallback
Installation
npm install react-bilde --saveUsage
import React from 'react';
import ReactDOM from 'react-dom';
import Image from 'react-bilde';
const App = () => {
return (
<div>
<image
src="img-400x200.jpg"
srcSet="img-400x200.jpg 400w, img-800x400.jpg 800w"
placeholder="img-20x10.jpg"
ratio={2}
fallback="image-not-found.jpg"
className="post-image"
/>
</div>
);
};
ReactDOM.render(<App />, document.body);Props
| Prop | Description | Type | Default |
|---|---|---|---|
src |
Sets the src attribute of an image (required) | string | undefined |
srcSet |
Sets the srcset attribute of an image. | string | undefined |
placeholder |
Specify a placeholder image URL or Component for lazy loaded image. | string/node | undefined |
blur |
Specify a blur level of a placeholder image. Set 0 to disable blurring. NOTE Works only if placeholder was defined as image URL |
number | 3 |
ratio |
Image ascpect ratio. | number | undefined |
debounce |
Debounce Value. | number | 200 |
animationSpeed |
Animation Speed (in ms) | number | 400 |
fallback |
Fallback image src. | string | undefined |
maxWidth |
Image maximum witdth | number / string | undefined |
inline |
Image inline or not | bool | false |
id |
Image identifier | string | undefined |
className |
Image class name. | string | undefined |
alt |
Sets the alt attribute of an image and placeholder. | string | undefined |
crossOrigin |
Sets the crossorigin attribute of an image and placeholder. | string | undefined |
sizes |
Sets the sizes attribute of an image. | string | undefined |
Contributing
See the contribution guidelines before creating a pull request.
Polyfills
- If you are using
npmand need to support browsers withoutPromiseyou will need aPromisepolyfill. - To support IE11 you will need to use
babel-polyfillor a similar ES2015+ polyfill.
