React component to fetch image resources via web workers
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.
InstallationUsing npm
Usagenpm install react-worker-image
Â
yarn add react-worker-image
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.
const ImageWorker = require('react-worker-image').default;
Â
or
Â
import ImageWorker from 'react-worker-image';
Â
usage in code
Props List Prop type Required type src yes string placeholder optional string or Component style optional Object imageClass optional string containerClass optional string<ImageWorker src='http://image-url' />
The above props are applied to the img tag.
Found a bug file them here.
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4