useWorker - GitLite

KO | EN

gitlite — search

#javascript #python #react #typescript #llm #golang #machine-learning #rust #deep-learning #linux #windows #kubernetes #vue #open-source

useWorker

(★ 3,113)

⚛️ useWorker() - A React Hook for Blocking-Free Background Tasks

File Explorer

Download Latest Version (.zip)

- config.json
- README.md
- - bug_report.md
  - feature_request.md
  - generic-question.md
- - code-quality.yml
  - preview-release.yml
  - release.yml
- dependabot.yml
- - index.html
  - package.json
  - README.md
  - vite.config.js
- - docusaurus.config.js
  - package.json
  - README.md
  - sidebars.js
- CONTRIBUTE.md
- RELEASE.md
- - .npmignore
  - CHANGELOG.md
  - Dockerfile
  - package.json
  - README.md
  - tsconfig.json
  - vite.config.mts
.editorconfig
.gitignore
biome.json
LICENSE
logo.png
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md

# Installation Guide

1. Get the code

git clone https://github.com/alewin/useWorker

Downloads the entire project code from GitHub to your computer.

cd useWorker

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

⚠️ This is a large repository, so this method may point to an internal sub-package rather than the actual core product. Check the full README as well.

docker build -f packages/useWorker/Dockerfile -t useworker .

Builds a runnable image based on the Dockerfile.

docker run -p 8080:80 useworker

Runs the built image as an actual container.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install --save @koale/useworker

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">
  <br>
  <img width="300px" src="logo.png" alt="useWorker"
    title="useWorker() Use web workers with react hook" />
  <br>
</h1>

<h2 align="center">
  Use web workers with react hook
  <br />
  https://useworker.js.org/  
  <a
    href="https://twitter.com/intent/tweet?text=useWorker - Use web workers with react hooks&url=https://github.com/alewin/useWorker&via=alessiokoci&hashtags=react,useworker,hooks,javascript">
    <br />
    <img alt="Tweet" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" />
  </a>

</h2>

<h3 align="center">
  <img alt="GitHub" src="https://img.shields.io/npm/dm/@koale/useworker" />
  <img alt="size" src="https://img.shields.io/bundlephobia/minzip/@koale/useworker/2.1.0" />
  <img alt="GitHub" src="https://img.shields.io/npm/l/@koale/useworker" />
 <img src="https://badgen.net/npm/types/tslib" alt="TypeScript Support" title="TypeScript Support" data-canonical-src="https://badgen.net/badge/TypeScript/Support" style="max-width:100%;">
</h3>

---

## 🎨 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.js.org/docs/introduction)
- [APIs](https://useworker.js.org/docs/api-useworker/)
- [Examples](https://useworker.js.org/docs/examples/examples-sort)
- [Limitations](https://useworker.js.org/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 (
    <button type="button" onClick={runSort}>
      Run Sort
    </button>
  );
};
```

---

## 🖼 Live Demo

<img alt="useworker demo" src="https://user-images.githubusercontent.com/980844/82120716-70151e00-9788-11ea-8f8d-07b06a13dde2.gif" />

---

## 🐾 Examples

[![Edit white-glitter-icji4](https://codesandbox.io/static/img/play-codesandbox.svg)](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)

---

[![Netlify Status](https://api.netlify.com/api/v1/badges/833cd6b2-6e74-47f0-aa85-5f14aea8ea35/deploy-status)](https://app.netlify.com/sites/useworker/deploys)