https://github.com/nitish24p/react-worker-image

React component to fetch image resources via web workers 🤖🤖
https://github.com/nitish24p/react-worker-image

image performance react web-worker

Last synced: 3 months ago
JSON representation

React component to fetch image resources via web workers 🤖🤖

• Host: GitHub
• URL: https://github.com/nitish24p/react-worker-image
• Owner: nitish24p
• License: mit
• Created: 2018-02-03T13:44:22.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-22T08:31:02.000Z (over 6 years ago)
• Last Synced: 2024-10-11T22:13:08.659Z (4 months ago)
• Topics: image, performance, react, web-worker
• Language: JavaScript
• Homepage:
• Size: 1.78 MB
• Stars: 232
• Watchers: 6
• Forks: 18
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-worker-image

README

        
# react-worker-image

[![Build Status](https://travis-ci.org/nitish24p/react-worker-image.svg?branch=master)](https://travis-ci.org/nitish24p/react-worker-image)

React component to fetch image resources via web workers

[react-worker-image](https://www.npmjs.com/package/react-worker-image) is a React component for loading images via a web worker. Thereby not blocking the main thread and speeding up page load time.

## Installation

Using npm

```bash

npm install react-worker-image

yarn add react-worker-image

```

## Usage

`react-worker-image` 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.

```js

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

or

import ImageWorker from 'react-worker-image';

```

usage in code

```jsx

```

## 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](https://github.com/nitish24p/react-worker-image/issues).

>Component in Action

Observe the page Load time at the bottom right corner in both cases.

The first is via a webworker and the second is the regular get.