A React Hook for Blocking-Free Background Tasks

by React

useWorker

Use web workers with react hook.

View Demo View Github

? 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