https://github.com/rickycodes/react-load-img

🖼️ declarative images in react
https://github.com/rickycodes/react-load-img

fallback images npm react

Last synced: 3 months ago
JSON representation

🖼️ declarative images in react

• Host: GitHub
• URL: https://github.com/rickycodes/react-load-img
• Owner: rickycodes
• License: mit
• Created: 2017-11-18T04:05:44.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-29T03:48:31.000Z (almost 8 years ago)
• Last Synced: 2024-04-25T01:20:21.957Z (about 2 years ago)
• Topics: fallback, images, npm, react
• Language: JavaScript
• Homepage: https://rickycodes.github.io/react-load-img/
• Size: 631 KB
• Stars: 1
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Load IMG

🖼️ pre-load and provide a fallback for images in react

[![npm-version](https://img.shields.io/npm/v/react-load-img.svg?style=flat)](https://www.npmjs.com/package/react-load-img)

[![build status](https://api.travis-ci.org/rickycodes/react-load-img.svg?branch=master)](https://travis-ci.org/rickycodes/react-load-img/)

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

## Why

The internet can be unpredictable and having a broken image in your web application is very uncool. This provides a way to add a pre-loader for a massive image and/or provide a fallback image in case your image fails to load for whatever reason.

## Props

### src `string`

`src` is a string representing the url of the image you'd like to load (just like an img tag)

### render `function`

`render` is a function that receives an object as its only argument

The object contains the following keys:

- src `string` (once loaded) otherwise `undefined`

- error `object` (if loading fails) otherwise `undefined`

## Install

```bash

npm install -S react-load-img

```

## Basic Usage

```javascript

 {

    return src

      ? 

      : error

        ? 
Failed to load image :(

        : 
Loading...

  }

} />

```

## License

Copyright © 2017 Ricky Miller (@rickycodes).


Released under the [MIT license](https://tldrlegal.com/license/mit-license).