1.0.1 • Published 6 years ago
react-sw-img v1.0.1
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 --saveor
yarn add react-sw-imgUse
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.