react-imageloader - npm explorer

react-imageloader
=================

🚨 This project is not maintained! 🚨

We are no longer using this component in our day-to-day work, so unfortunately,
we have neglected maintenance of it for quite some time. Among the reasons
why we haven't been using this component are:

- It has some design flaws
- We've been more focus on react-native

However, it may still work for you. If you are looking for something like
this, but don't want to take on an unmaintained dependency, check out
this fork.

See the support matrix below
if you are determined to use this.

---

One of the hardest things to wrangle in the browser is loading. When images and
other linked elements appear in the DOM, the browser makes decisions on when to
load them that sometimes result in problems for a site and its users, such as
[FOUC], unexpected load ordering, and degraded performance when many loads are
occurring.

This [React] component can improve the situation by allowing you to display
content while waiting for the image to load, as well as by showing alternate
content if the image fails to load.

Usage
-----

``javascript import React from 'react'; import ImageLoader from 'react-imageloader';

function preloader() { return ; }

React.render(( src="/path/to/image.jpg" wrapper={React.createFactory('div')} preloader={preloader}> Image load failed! ), document.body);

Props -----

Name | Type | Description ------------|----------|------------className | string | An optional class name for the wrappercomponent.imgProps | object | An optional object containing props for the underlying imgcomponent.onError| function | An optional handler for the [error] event.onLoad| function | An optional handler for the [load] event.preloader| function | An optional function that returns a React element to be shown while the image loads.src| string | The URL of the image to be loaded.style | object | An optional object containing styles for the wrappercomponent.wrapper | function | A function that takes a props argument and returns a React element to be used as the wrapper component. Defaults to React.createFactory('span').

Children --------

Children passed to ImageLoader will be rendered only if the image fails to load. Children are essentially alternate content to show when the image is missing or unavailable.

For example:

`javascript

React.createClass({ // This will only show if "notgonnaload.jpg" doesn't load. errorMessage() { return (


        Something went wrong!

        Not gonna load "notgonnaload.jpg". bummer.


    );
  },
  render() {
    return (
      
        {this.errorMessage()}
      
    );
  }
})

Design Decisions (mistakes?) ---------------------------- Since v2.0, loading is done 'off DOM' in a JavaScriptImage()(instead of hidden in the DOM via a React), so values passed to the onLoadandonError` callbacks will be the browser native values, not React's
synthesized values. While this shouldn't be a problem for the vast majority
of use cases, it can cause weirdness when browser caching is disabled
(i.e., images loading twice, preloaders disappearing before the image is ready).

Supported versions of React
---------------------------

React | ImageLoader
-------------|------------
<0.13 | 1.x
>=0.13, <15 | 2.x
>=15 | 3.x

[FOUC]: http://en.wikipedia.org/wiki/FOUC
[React]: http://facebook.github.io/react/
[load]: https://developer.mozilla.org/en-US/docs/Web/Events/load
[error]: https://developer.mozilla.org/en-US/docs/Web/Events/error