react-load-img

0.1.3 • Public • Published

React Load IMG

📷 pre-load and provide a fallback for images in react

npm-version build status js-standard-style

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

npm install -S react-load-img

Basic Usage

<LoadImage
  src='https://upload.wikimedia.org/wikipedia/commons/8/86/Redningsb%C3%A5den_k%C3%B8res_gennem_klitterne_%28high_resolution%29.jpg'
  render={({ src, error }) => {
    return src
      ? <img src={src} />
      : error
        ? <div>Failed to load image :(</div>
        : <div>Loading...</div>
  }
/>

License

Copyright © 2017 Ricky Miller (@rickycodes).

Released under the MIT license.

Package Sidebar

Install

npm i react-load-img

Weekly Downloads

0

Version

0.1.3

License

MIT

Last publish

Collaborators

  • rickycodes