react-img-fallback

Install

yarn add react-img-fallback

or

npm install --save react-img-fallback

Description

This component is designed for implement the onError function of Image component, just one time. The goal is to give a new source url or a fallback component when the src url is on error.

Prerequisites

This library use recompose for optimize rendering : https://github.com/acdlite/recompose

API

PropTypes	Type (Default)	Description
style	object (empty)	inline style extends component
className	string (empty)	name class extends component
src	string (undefined)	url source extends image component
alt	string (empty)	alt tag extends image component
fallback	Component or string	the fallback if image on error
onClick	function (undefined)	callback called when image clicked

Component by an example

URL images to print :

We want to draw this image (BeautifulPonyWithHorn.jsx):

import React from 'react'
import ImgFallback from 'react-img-fallback'

export default () => {

  /* Url for take a beautyful unicorn ! */
  const ponyUrl = 'https://s-media-cache-ak0.pinimg.com/736x/fe/92/c0/fe92c04bd02a5f740a7611c6379b2878.jpg'

  /* Fallback Url (sick pony with horn) */
  const fallbackUrl = 'http://sickponywithouthorn.png'

  return (
    <ImgFallback
      style={{width: '250px'}}
      src={ponyUrl}
      alt="ponyWithHorn"
      fallback={FallbackUrl}
      onClick={() => alert('unicorn POWER')}
    >
    </ImgFallback>
  )
}

If pony is sick, the fallback url is printed on img fallback !

If your fallback is a component

Demo is ready and online with WebPackBin

import React from 'react'
import ImgFallback from 'react-img-fallback'

export default () => {
  /* Url for take a beautyful unicorn ! */
  const ponyUrl = 'https://s-media-cache-ak0.pinimg.com/736x/fe/92/c0/fe92c04bd02a5f740a7611c6379b2878.jpg'

  /* Fallback Component (sick pony with horn) */
  const Fallback = (
    <pre>
                         n
              |\   |  or
             _| \-/ic
            /    un
          //    ~ + \
         //         |
        //    \      \
       |||     | .  .|
      ///     / \___/
    </pre>
   )

    <ImgFallback
      style={{width: '250px'}}
      src={ponyUrl}
      alt="ponyWithHorn"
      fallback={Fallback}
      onClick={() => alert('unicorn POWER')}
    >
    </ImgFallback>
  )
}

About uni rakun

uni rakun is created by two passionate french developers.

Do you want to contact them ? Go to their website

Guillaume CRESPEL	Fabien JUIF