react-image-service-worker

A tiny 3.4K(1.4K gzipped) React component to fetch image resources via web workers

react-image-service-worker is a React component, which uses service workers to load images. Thereby not blocking the main thread and speeding up page load time.

Installation

Using npm

npm install react-image-service-worker

yarn add react-image-service-worker

Usage

react-image-service-worker exports one react component which takes src as a prop, and an optional prop of placeholder, style and imageClass which are applied to the img tag.

const ImageWorker = require('react-image-service-worker').default;

or

import ImageWorker from 'react-image-service-worker';

usage in code

<ImageWorker src='http://image-url' />

Props List

Prop type	Required	type
src	yes	string
placeholder	optional	string or Component
style	optional	Object
imageClass	optional	string
containerClass	optional	string

The above props are applied to the img tag.

Found a bug file them here.

Component in Action

Example:

import React, { Component } from 'react';
import ImageWorker from 'react-image-service-worker';

class App extends Component {
  render() {
    return (
      <div>
        <ImageWorker src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' />
        {/* <img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg" /> */}
      </div>
    );
  }
}

export default App;

Using service worker for loading images, the results are:

Without service worker(normal get request), the results are: