A React Hook for Blocking-Free Background Tasks

useWorker

Use web workers with react hook.

? Features

• Run expensive function without blocking UI (Show live gif)
• Supports Promises pattern instead of event-messages
• Size: less than 3KB!
• Clear API using hook
• Typescript support
• Garbage collector web worker instance
• Remote dependencies option
• timeout option

? Install

• @latest

npm install --save @koale/useworker

? Import

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

? 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>
  );
};

? Examples

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

? Roadmap

• [x] Kill Web Worker
• [x] Reactive web worker status
• [x] Add timeout option
• [x] import and use remote script inside useWorker function
• [ ] support Transferable Objects #47
• [ ] import and use local script inside useWorker function #37
• [ ] useWorkers Hook #38

GitHub