npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

react-image

v2.2.0

Published

React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support

Downloads

134,742

Readme

React Image 🏝 🏖 🏜

npm npm npm npm Known Vulnerabilities wercker status codecov

React Image is an <img> tag replacement for React.js, featuring preloader and multiple image fallback support.

With React Image you can specify multiple images to be used as fallbacks in the event that the browser couldn't load the previous image. Additionally, you can specify any React element to be used before an image is loaded (i.e. a spinner) and in the event than the specified image(s) could not be loaded.

React Image will cleverly hide "broken" images to prevent showing the browsers default "broken image" placeholder. React Image caches past attempts to load an image so that the same image won't be attempted to be pulled over the network again, until the next page reload.

On unmount React Image will abort any current image downloads potentially saving bandwidth and browser resources should the image no longer be desirable.

This package was formerly known as react-img-multi. Special thanks to @yuanyan for agreeing to relinquish the name!

Getting started

  1. To include the code locally in ES6, CommonJS, or UMD format, install react-image using npm:
npm install react-image --save
  1. To include the code globally from a cdn:
<script src="https://unpkg.com/react-image/umd/index.js"></script>

Dependencies

react-image has no external dependencies, aside for the usual react and react-dom.

Documentation

Include react-image in your component:

// using an ES6 transpiler, like babel
import Img from 'react-image'

// otherwise
let Img = require('react-image')

and set a source for the image:

const myComponent = () => <Img src="https://www.example.com/foo.jpg" />

will generate:

<img src="https://www.example.com/foo.jpg">

If the image cannot be loaded, <img> will not be rendered, preventing a "broken" image from showing.

Multiple fallback images:

When src is specified as an array, react-image will attempt to load all the images specified in the array, starting at the first and continuing until an image has been successfully loaded.

const myComponent = () => (
  <Img
    src={['https://www.example.com/foo.jpg', 'https://www.example.com/bar.jpg']}
  />
)

If an image has previously been attempted unsuccessfully, react-image will not retry loading it again until the page is reloaded.

Show a "spinner" or other element before the image is loaded:

const myComponent = () =>
  <Img
    src={[
      'https://www.example.com/foo.jpg',
      'https://www.example.com/bar.jpg'
    ]}
    loader={/*any valid react element */}
  />

If an image was previously loaded successfully (since the last time this page was loaded), the loader will not be shown and the image will be rendered directly instead.

Show a fallback element if none of the images could be loaded:

const myComponent = () =>
  <Img
    src={[
      'https://www.example.com/foo.jpg',
      'https://www.example.com/bar.jpg'
    ]}
    unloader={/*any valid react element */}
  />

Decoding before paint

By default and when supported by the browser, react-image uses img.decode() to decode the image and only render it when it's fully ready to be painted. While this doesn't matter much for vector images (such as svg's) which are rendered immediately, decoding the image before painting prevents the browser from hanging or flashing while the image is decoded. If this behaviour is undesirable, it can be disabled by setting the decode prop to false:

const myComponent = () => (
  <Img src={'https://www.example.com/foo.jpg'} decode={false} />
)

Loading images with a CORS policy

When loading images from another domain with a CORS policy, you may find you need to use the crossorigin attribute. For example:

const myComponent = () => (
  <Img src={'https://www.example.com/foo.jpg'} crossorigin="anonymous" />
)

Animations and other advanced uses

A wrapper element container can be used to facilitate higher level operations which are beyond the scope of this project. container takes a single property, children which is whatever is passed in by React Image (i.e. the final <img> or the loaders).

For example, to animate the display of the image (and animate out the loader) a wrapper can be set:

<Img
  src={'https://www.example.com/foo.jpg'}
  container={children => {
    return <div className="foo">{children}</div>
  }}
/>

The <img> will now be contained by the div with class foo which can be targeted via css. A crude example of a transition using ReactCSSTransitionReplace can be found here. Error reporting (i.e. logging images that loaded ok or failed to load) can be accomplished with container, too. A sample implementation can be found here.

By default, the loader and unloader components will also be wrapped by the container component. These can be set independently by passing a container via loaderContainer or unloaderContainer. To disable the loader or unloader from being wrapped, pass a noop to loaderContainer or unloaderContainer (like unloaderContainer={img => img}).

Recipes

Delay rendering until element is visible (lazy rendering)

By definition, React Image will try loading images as soon as the <Img> element is rendered in the DOM. This may be undesirable in some situations, such as when the page has many images. As with any react element, rendering can be delayed until the image is actually visible in the viewport using popular libraries such as react-visibility-sensor. Here is a quick sample (untested!):

import Img from 'react-image'
import VisibilitySensor from 'react-visibility-sensor'

const myComponent = () =>
  <VisibilitySensor>
    <Img src='https://www.example.com/foo.jpg'>
  </VisibilitySensor>

Animate image loading

see above

Browser Support

react-image does not include an Object.assign polyfill, that may be needed depending on your targeted browsers. You can add it in one of the following ways:

  1. include it in your package: https://www.npmjs.com/package/es6-object-assign

  2. Use Mozilla's polyfill: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill

  3. Include the following code before including react-image:

Object.assign = Object.assign ||
  function(r) {
    for (var t = 1; t < arguments.length; t++) {
      var n = arguments[t]
      for (var a in n)
        Object.prototype.hasOwnProperty.call(n, a) && (r[a] = n[a])
    }
    return r
  }

License

react-image is available under the MIT License