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.
npm install react-sw-img --save
or
yarn add react-sw-img
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
| 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 |
This library will failover to using a JavaScript Image object to load the src provided if the load on the service worker fails.