Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alewin/useWorker
⚛️ useWorker() - A React Hook for Blocking-Free Background Tasks
https://github.com/alewin/useWorker
background hook hooks react thread typescript-library useworker web-worker web-worker-react web-workers
Last synced: about 1 month ago
JSON representation
⚛️ useWorker() - A React Hook for Blocking-Free Background Tasks
- Host: GitHub
- URL: https://github.com/alewin/useWorker
- Owner: alewin
- License: mit
- Created: 2020-01-18T19:27:40.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-01T04:31:08.000Z (over 1 year ago)
- Last Synced: 2024-07-24T18:21:26.088Z (5 months ago)
- Topics: background, hook, hooks, react, thread, typescript-library, useworker, web-worker, web-worker-react, web-workers
- Language: JavaScript
- Homepage: https://useworker.js.org/
- Size: 2.28 MB
- Stars: 2,936
- Watchers: 22
- Forks: 99
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `@koale/useworker`
- awesome-react-hooks-cn - `@koale/useworker`
- awesome-list - useWorker - A React Hook for Blocking-Free Background Tasks | alewin | 2149 | (JavaScript)
- awesome-react-hooks - `@koale/useworker`
- awesome-react-hooks - `@koale/useworker`
README
# ⚠️ Important Notice: Library Refactoring in Progress ⚠️
A major refactoring of this library is currently underway. By the end of October/November 2024, we will release significant updates including:
- Full compatibility with React 17/18/19
- Improvements and optimizations
- Enhanced TypeScript support
- New features and capabilities
Stay tuned for these upcoming changes! 🚀
Use web workers with react hook
https://useworker.js.org/
---
## 🎨 Features
- Run expensive function **without blocking UI** ([Show live gif](https://github.com/alewin/useWorker/issues/2))
- Supports **Promises** pattern instead of event-messages
- Size: less than `3KB`!
- Clear [API](https://useworker.js.org/docs/api-useworker#options-api) using hook
- Typescript support
- Garbage collector web worker instance
- [Remote dependencies](https://useworker.js.org/docs/api-useworker#options-api) option
- [timeout](https://useworker.js.org/docs/api-useworker#options-api) option
---
## 💾 [Install](https://www.npmjs.com/package/@koale/useworker)
- **@latest**
```bash
npm install --save @koale/useworker
```
---
## 🔨 Import
```jsx
import { useWorker, WORKER_STATUS } from "@koale/useworker";
```
---
## 📙 Documents
- [Getting Started](https://useworker.netlify.com/docs/introduction/)
- [APIs](https://useworker.netlify.com/docs/api-useworker)
- [Examples](https://useworker.netlify.com/docs/examples/examples-sort)
- [Limitations](https://useworker.netlify.com/docs/limitations)
---
## 🍞 Demo
- [Sorting](https://icji4.csb.app/sorting): Sorting 50000 random numbers
- [Csv](https://icji4.csb.app/csv): Generate Csv, Parse Csv, Convert to JSON
- [External Dependencies](https://icji4.csb.app/external) Use external scripts inside WebWorker
---
## ⚙ Web Workers
Before you start using this [hook](https://www.npmjs.com/package/@koale/useworker), I suggest you to read the [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) documentation.
---
## 🐾 Usage
```jsx
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(result);
};
return (
Run Sort
);
};
```
---
## 🖼 Live Demo
---
## 🐾 Examples
[](https://codesandbox.io/s/white-glitter-icji4?fontsize=14&hidenavigation=1&theme=dark)
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
- [x] support [Transferable Objects](https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects)
- [x] Testing useWorker [#41](https://github.com/alewin/useWorker/issues/41)
- [x] Import and use local script inside `useWorker` function [#37](https://github.com/alewin/useWorker/issues/37)
- [ ] useWorkers Hook [#38](https://github.com/alewin/useWorker/issues/38)
- [ ] useWorkerFile Hook [#93](https://github.com/alewin/useWorker/issues/93)
---
## 🤔 Motivation and Limitations
Most react projects are initialized through [Create React App](https://github.com/facebook/create-react-app).
CRA unfortunately does not offer support for webworkers, unless you eject and change the webpack configuration manually.
This library allows you to use web workers without having to change the CRA configuration, which is why there are often limitations or particular workarounds.
If you are interested in changing the webpack configuration to manually manage your workers, see: [worker-loader](https://github.com/webpack-contrib/worker-loader)
---
## Known issues
There's a known issue related to transpiling tools such as Babel causing `Not refereced` errors.
Since the approach of this library is moving the entire function passed to the Hook to a worker, if the function gets transpiled, variable definitions used by the transpiling tool may get out of scope when the function gets moved to the worker, causing unexpected reference errors.
If you're experimenting this type of issue, one workaround is wrapping your function declaration inside a function object as a string.
```js
const sum = new Function(`a`, `b`, `return a + b`);
```
---
## 🌏 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](https://github.com/alewin/useWorker/issues/new)
---
## 💡 Similar Projects
- [greenlet](https://github.com/developit/greenlet/)
- [react-hooks-worker](https://github.com/dai-shi/react-hooks-worker)
---
## 💻 Mantainers
- [@naorpeled](https://github.com/naorpeled)
- [@alewin](https://github.com/alewin)
- [@zant](https://github.com/zant)
## 💻 Contributors
- Thanks to:
- [@zant](https://github.com/zant) (test, CI, `RFC`, bugfixes, `localdependencies` feature, ...)
- [@101arrowz](https://github.com/101arrowz) ( `isoworker` packages proposal )
- [@z4o4z](https://github.com/z4o4z) (`Typescript` implementation, Discussion of `RFC`)
- [@IljaDaderko](https://github.com/IljaDaderko) (`Typescript` support, Discussion of `RFC`)
- [@ophirg](https://github.com/ophirg) (`Typescript` support)
- [@Pigotz](https://github.com/Pigotz) (Discussion of `RFC`)
- [@gubo97000](https://github.com/gubo97000) (Fix [#108](https://github.com/alewin/useWorker/issues/108))
_How to contribute?_
Read [CONTRIBUTE.md](docs/CONTRIBUTE.md)
---
## 📜 License
[MIT](https://github.com/alewin/useWorker/blob/develop/LICENSE)
---
[](https://app.netlify.com/sites/useworker/deploys)