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 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-graceful-image

v1.5.0

Published

An image component for gracefully dealing with images errors by providing a placeholder and retries on failure

Downloads

7,695

Readme

React Graceful Image

An image component for gracefully dealing with image errors, by providing optional lazy loading, optional placeholder and configurable retries on failure. Particularly useful in situations where your application might be used in poor signal areas such as when travelling on a train, a bus or a car.

Example

  1. Default browser behaviour when image fails due to bad signal
  2. With react-graceful-image placeholder
  3. With react-graceful-image disabled placeholder
  4. With react-graceful-image retries - if the image fails to load, the package will gracefully re-attempt loading the image again

(note: these are not mutually exclusive, for example the default behaviour makes use of both 2 & 4 together.)

Installation

npm install --save react-graceful-image

Basic Usage

<Image
    src='path_to_image'
    width='300'
    height='300'
    alt='My awesome image'
/>

Default Behaviour

  1. Render an SVG placeholder - if environment doesn't support SVG, then avoid rendering the placeholder
  2. Check if placeholder is within the visible viewport - if so then load the image
  3. If image loads successfully - display the image by fading it in
  4. If image fails to load - retry loading the image starting with a 2 second delay and doubling it with every retry (by default retry stops after 8 tries)

Prop Options

| Prop | Description | Default | Type | | ---------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------ | -------- | | Any valid html image prop | Any valid html image prop | none | valid html image prop | | placeholderColor | Placeholder's color | '#eee' | string | | noPlaceholder | Turn off placeholder rendering | false | bool | | customPlaceholder | Provide a custom placeholder. This should be a function taking a ref and setting it on your custom placeholder so that its position could be observed within the viewport | null | Function returning a component | | retry | Retry algorithm's configuration, consisting of count, delay and accumulate | {count: 8, delay: 2, accumulate: 'multiply'} | object | | onLoad | Callback that will be invoked when an image loads | none | function | | onError | Callback that will be invoked after the retry algorithm has finished and the image still hasn't been loaded | none | function | | noLazyLoad | Turn off lazy loading | false | bool |

Retry

You can modify the default retry algorithm by supplying a retry prop consisting of 3 properties: count, delay and accumulate:

  • count specifies the number of times you want to retry
  • delay specifies the delay between retries (in seconds)
  • accumulate specifies how the delay should increase with each retry, possible values: 'multiply' (default), 'add' or false (false can also be represented by simply omitting this property)

Accumulate

  • accumulate: 'multiply' will multiply delay after each retry by the given delay value, i.e. if delay: 2 is given then 1st retry will be in 2 seconds, 2nd retry will be in 4 seconds, 3rd retry will be in 8 seconds, 4th retry will be in 16 seconds etc.
  • accumulate: 'add' will increment delay after each retry by the given delay value, i.e. if delay: 2 is given then 1st retry will be in 2 seconds, 2nd retry will be in 4 seconds, 3rd retry will be in 6 seconds, 4th retry will be in 8 seconds, etc.
  • accumulate: 'false' will keep the delay constant between retries, i.e. if delay: 2 is given then retry will run every 2 seconds

Examples

1: The below code snippet will display a grey placeholder until the user scrolls it into view at which point it will be lazily swapped in for the real image. If, however, the real image fails to load, then the retry algorithm is going to kick in and try loading the image again for a maximum of 8 times, with an initial delay of 2 seconds, which will then increase to 4 seconds, then to 8 seconds, then to 16 seconds, and so on (default retry configuration).

<Image
    src='path_to_image'
    className='content-image'
    alt='My awesome image'
    onLoad={ onLoadCallback }
    onError={ onErrorCallback }
/>

2: The below code snippet will display a grey placeholder until the user scrolls it into view at which point it will be lazily swapped in for the real image. If, however, the real image fails to load, then the retry algorithm is going to kick in and try loading the image again for a maximum of 10 times, with a fixed 2 second delay in-between each retry.

<Image
    src='path_to_image'
    width='250'
    height='250'
    style={{ padding: '20px' }}
    alt='My awesome image'
    retry={{ count: 10, delay: 2 }}
    onLoad={ onLoadCallback }
    onError={ onErrorCallback }
/>

3: The below code snippet will display, a custom, your own provided placeholder until the user scrolls it into view at which point it will be lazily swapped in for the real image. If, however, the real image fails to load, then the retry algorithm is going to kick in and try loading the image again for a maximum of 15 times, with initial delay of 3 seconds which will then increase to 6 seconds, then to 9 seconds, then to 12 seconds, and so on.

<Image
    src='path_to_image'
    width='150'
    height='150'
    style={{ padding: '20px' }}
    alt='My awesome image'
    customPlaceholder={ ref => <SomePlaceholder refProp={ ref } /> }
    retry={{ count: 15, delay: 3, accumulate: 'add' }}
    onLoad={ onLoadCallback }
    onError={ onErrorCallback }
/>