@koale/useworker
useWorker() - Web worker using React hook
Last updated 4 years ago by koale .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ npm install @koale/useworker 
SYNC missed versions from official npm registry.


useWorker

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

Bytes Newsletter

GitHub size GitHub TypeScript Support


🎨 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


⚙ 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

Edit white-glitter-icji4

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
  • [x] Testing useWorker #41
  • [x] Import and use local script inside useWorker function #37
  • [ ] useWorkers Hook #38

🤔 Motivation and Limitations

Most react projects are initialized through 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

--

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.

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


💡 Similar Projects


💻 Contributors


📜 License

MIT © alewin


Netlify Status

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
Maintainers (1)
Downloads
Total 0
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dependents (0)
None

© 2010 - cnpmjs.org x YWFE | Home | YWFE