JSPM – @koale/useworker@1.2.1

Package Exports

@koale/useworker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@koale/useworker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

⚛️ useWorker - Use web workers with react hooks

Features

Run expensive function without blocking UI (Show live gif)
Supports Promises pattern instead of event-messages
Size: < 1KB, with zero dependencies
Clear API using hook

Install

npm i @koale/useworker

Import

import useWorker, { WORKER_STATUS } from "@koale/useworker";

API

const [workerFn, workerStatus, workerTerminate] = useWorker(fun);

Value	Type	Description
fn	Function	The `pure function` to run with web workers
workerFn	Promise Function	The `function` that allows you to run `fn` with web worker
workerStatus	`@WORKER_STATUS`	The status of `workerFn` function
workerTerminate	Function	The function that allow to kill the worker

`WORKER_STATUS`: Worker Status

import { WORKER_STATUS } from "@koale/useworker";

WORKER_STATUS	Type	Description
`PENDING`	string	the web worker has been initialized, but has not yet been runned
`SUCCESS`	string	the web worker, has been executed correctly
`RUNNING`	string	the web worker, is running
`ERROR`	string	the web worker, ended with an error
`TIMEOUT_EXPIRED`	string	The web worker was killed because the defined timeout expired.

Web Workers

Before you start using this hook, I suggest you to read the Web Worker documentation.

Remember that your web worker function fn must be a function without local dependencies, which does not produce side-effects.

The web worker don't have access to the document, and window object

  document.querySelectoAll('#demoId');

The web worker cannot return a function because the response is serialized.

Usage

import React from "react";
import useWorker from "@koale/useworker";

const numbers = [...Array(5000000)].map(e => ~~(Math.random() * 1000000));
const sortNumbers = nums => nums.sort();

const Example = () => {
  const [sortWorker] = useWorker(sortNumbers);

  const runSort = async () => {
    const result = await sortWorker(numbers); // non-blocking UI
    console.log("End.");
  };

  return (
    <button type="button" onClick={runSort}>
      Run Sort
    </button>
  );
};

Example

More examples: https://github.com/alewin/useWorker/tree/develop/example

Roadmap

Kill Web Worker
Reactive web worker status
Add timeout option
import and use external script inside useWorker function
import and use local script inside useWorker function
run multiple instance of the worker

Contribute? Bug? New Feature?

The library is experimental so if you find a bug or would like to request a new feature, open an issue

@koale/useworker