react-render-image

react-render-image

Render an image in React.

Installation

npm install --save react-render-image
// OR
yarn add react-render-image

Usage

Example (source)

import React from 'react';
import Image from 'react-render-image';

<Image src={src} loading="🔄" loaded="✅" errored="❌"/>

<Image src={src} loading="🔄" errored="❌">
  {({image, loaded, errored}) => {
    return <img src={image.src} width={image.width} height={image.height}/>;
  }}
</Image>

API

Props

src (required)

string

The image URI.

srcset

string

The image URIs to use given various conditions. See the MDN for further detail.

sizes

string

The width of the image given various conditions. See the MDN for further detail.

loading

React.Node

Rendered when the image is loading.

loaded

React.Node

Rendered when the image is loaded.

errored

React.Node

Rendered when the image is errored.

children

({ image?: Image; loaded: boolean; errored: boolean; }) => React.Node

Called to render something when the image is loading, loaded or errored.

Parameters:

• image - The Image object. This can be used to inspect the width and height of the image, or it can be drawn onto a canvas using ctx.drawImage().
• loaded - A boolean indicating whether the image has loaded.
• errored - A boolean indicating whether the image has errored.

Returns:

RectNode

onLoad

() => void

Called when the image has been loaded.

onError

() => void

Called when the image cannot be loaded.

Changelog

2.1.0

• Added support for srcset and sizes