react-sw-img

What is it?

react-sw-img is dependency free react component that optimizes image loading by using background threads. For more information on background threads or the approach used by this library, please see this blog article.

Installation

npm install react-sw-img --save

or

yarn add react-sw-img

Use

Simply import the default export of the library and use it as you would an img tag.

import WorkerImage from 'react-sw-img';

<WorkerImage src="https://url.of.image" />

In addition, the following properties will be passed through to the resultant component:

• className
• style
• width
• height

Available Properties

| Property | Default | Value | | ------------- |:-------------:| -----| | src | undefined | a string which is the source of the image | | placeholder | undefined | a string the is the source of the image you want to use until the image provided in src loads | | background | false | a boolean to render the image as the background of a div rather than an img tag, any children will be rendered inside of the resultant div if true| | onLoad | undefined | a function to be called when the image is loaded | | onError | undefined | a function to be called when the image load produces an error |

Notes

This library will failover to using a JavaScript Image object to load the src provided if the load on the service worker fails.