react-image-render v0.0.3

react-image-render

Load and render an image with react.

Installation

npm install --save react-image-render

Usage

Example (source)

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

<ImageLoader src={src}>
  {({image, loaded, errored}) => {

    if (loaded) {
      return (
        <img src={src} width={image.width} height={image.height}/>;
    }

    if (errored) {
      return <span>❌</span>;
    }

    return <span>Loading...</span>;
  }}
</ImageLoader>

API

Props

src

A string. The image URL.

onLoad

A function called when the image is loaded.

onError

A function called when the image cannot be loaded.

children

The function called to render something when the image is loading, loaded or errored.

Parameters:

• status - An object containing:
  • loaded - A boolean indicating whether the image has loaded.
  • errored - A booleanindicating whether the image has errored.
  • image - The Image object which can be inspected to determine the width and height of the image, or drawn onto a canvas with ctx.drawImage().

Returns:

A RectNode.