Package - @koale/useworker

Use web workers with react hook
https://useworker.js.org/

🎨 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
Typescript support
Garbage collector web worker instance
timeout option

💾 Install

@latest

npm install --save @koale/useworker

@next 3.0.0-beta

npm install --save @koale/useworker@next

🔨 Import

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

📙 Documents

🍞 Demo

Sorting: Sorting 50000 random numbers
Csv: Generate Csv, Parse Csv, Convert to JSON
External Dependencies Use external scripts inside WebWorkers

⚙ Web Workers

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

🐾 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 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

💡 Similar Project

react-hooks-worker

💻 Contributors

Thanks to @Pigotz @grdnrt @IljaDaderko @z4o4z

📜 License

MIT © alewin

Current Tags

3.3.0-beta.2 ... beta (4 years ago)
4.1.0 ... latest (2 months ago)
3.0.0-beta.3 ... next (5 years ago)

37 Versions

4.1.0 ... 2 months ago
4.0.2 ... 4 years ago
4.0.1 ... 4 years ago
3.4.0 ... 4 years ago
3.3.0 [deprecated] ... 4 years ago
3.3.0-beta.2 ... 4 years ago
3.3.0-beta ... 4 years ago
4.0.0 ... 4 years ago
3.2.1 ... 4 years ago
3.2.0 ... 5 years ago
3.1.0 ... 5 years ago
3.0.0 ... 5 years ago
3.0.0-beta.3 ... 5 years ago
3.0.0-beta.2 ... 5 years ago
3.0.0-beta ... 5 years ago
2.1.3 ... 5 years ago
2.1.3-rc.1 ... 5 years ago
2.1.3-beta ... 5 years ago
2.1.2 ... 5 years ago
2.1.1 ... 5 years ago
2.1.0 ... 5 years ago
2.0.6 ... 5 years ago
2.0.5 ... 5 years ago
2.0.4 ... 5 years ago
2.0.3 ... 5 years ago
2.0.2 ... 5 years ago
2.0.1 ... 5 years ago
2.0.0 ... 5 years ago
1.2.1-a ... 5 years ago
1.2.1 ... 5 years ago
1.2.0 ... 5 years ago
1.0.2 ... 5 years ago
1.0.1 ... 5 years ago
1.0.0 ... 5 years ago
0.0.2 ... 5 years ago
0.0.1-a ... 5 years ago
0.0.1 ... 5 years ago

Use web workers with react hook https://useworker.js.org/