react-bilde

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 --save

Usage

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 npm and need to support browsers without Promise you will need a Promise polyfill.
• To support IE11 you will need to use babel-polyfill or a similar ES2015+ polyfill.