https://useworker.js.org/
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";
📙 Documents
🍞 Demo
- Sorting: Sorting 50000 random numbers
- Csv: Generate Csv, Parse Csv, Convert to JSON
- External Dependencies Use external scripts inside WebWorker
⚙ 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
- 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
💡 Similar Project
💻 Contributors
- Thanks to @Pigotz @grdnrt @IljaDaderko @z4o4z
📜 License
MIT © alewin