npm

Need private packages and team management tools?Check out npm Orgs. »

react-image-loader-hoc

1.0.6 • Public • Published

React Image Loader HOC

Version React Downloads License

React-Image-Loader-HOC is a High Order Component that allows you to enhance your React Image Component by adding features to handle the loading of the image source in an elegant way.

Features

  • Super easy to use.
  • Customizable - Provided props to make it custom for your project.

Installation

$ yarn add react-image-loader-hoc
or
$ npm install --save react-image-loader-hoc

Usage

import React, { Component } from 'react';
import withImageLoader from 'react-image-loader-hoc';

const Image = props => (<img alt="" {...props} />);
const ImageWithLoader = withImageLoader(Image);

class App extends Component {
  render() {
    return (
        <div>
          <ImageWithLoader
            src="https://edmullen.net/test/rc.jpg"
            width="400px"
            height="200px"
          />
        </div>
    );
  }
}

Props

Prop Type Required Description Default
src String Yes Image url -
onLoad Function No Callback when load is successful -
onError Function No Callback when load fails -
loaderComp Component No Custom React component to be displayed while loading -
errorComp Component No Custom React component to be displayed on Error -
fadeIn Boolean No Load the image with Fade In effect True

Demo

You want to see some examples? Go to Online Demo

install

npm i react-image-loader-hoc

Downloadsweekly downloads

19

version

1.0.6

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability