https://github.com/unirakun/react-img-fallback
React Component print a fallback if img src doesn't here or error occured
https://github.com/unirakun/react-img-fallback
fallback image img react
Last synced: 6 months ago
JSON representation
React Component print a fallback if img src doesn't here or error occured
- Host: GitHub
- URL: https://github.com/unirakun/react-img-fallback
- Owner: unirakun
- License: mit
- Created: 2017-03-31T15:16:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T20:52:57.000Z (almost 3 years ago)
- Last Synced: 2025-03-27T17:51:54.646Z (6 months ago)
- Topics: fallback, image, img, react
- Language: JavaScript
- Homepage:
- Size: 629 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-img-fallback
[](https://circleci.com/gh/unirakun/react-img-fallback/tree/master) [](https://www.npmjs.com/package/react-img-fallback) [](https://coveralls.io/github/Trampss/react-img-fallback?branch=master)
## 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**):
```es6
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 (
alert('unicorn POWER')}
>
)
}
```
If pony is sick, the fallback url is printed on img fallback !
### If your fallback is a component
[Demo](https://www.webpackbin.com/bins/-KgjzE83zUAP2XLyVM6o) is ready and online with WebPackBin
```es6
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 = (
n
|\ | or
_| \-/ic
/ un
// ~ + \
// |
// \ \
||| | . .|
/// / \___/
)
alert('unicorn POWER')}
>
)
}
```
# About uni rakun
**uni rakun** is created by two passionate french developers.
Do you want to contact them ? Go to their [website](https://unirakun.fr)
