All Projects → alewin → Useworker

alewin / Useworker

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

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
CSS
56736 projects
HTML
75241 projects
Dockerfile
14818 projects

Projects that are alternatives of or similar to Useworker

Workly
A really simple way to move a function or class to a web worker. 🏋️‍♀️→ 😄
Stars: ✭ 1,848 (-17.24%)
Mutual labels:  thread, web-worker, web-workers
React Native Threads
Create new JS processes for CPU intensive work
Stars: ✭ 527 (-76.4%)
Mutual labels:  thread, web-worker
React Nprogress
⌛️ A React primitive for building slim progress bars.
Stars: ✭ 173 (-92.25%)
Mutual labels:  hooks, hook
Ysf
YSF Server Functions
Stars: ✭ 77 (-96.55%)
Mutual labels:  hooks, hook
Workerize
🏗️ Run a module in a Web Worker.
Stars: ✭ 4,134 (+85.13%)
Mutual labels:  web-worker, web-workers
Greenlet
🦎 Move an async function into its own thread.
Stars: ✭ 4,511 (+102.02%)
Mutual labels:  thread, web-worker
Fontmod
Simple hook tool to change Win32 program font.
Stars: ✭ 1,064 (-52.35%)
Mutual labels:  hooks, hook
Swr
React Hooks for data fetching
Stars: ✭ 20,348 (+811.24%)
Mutual labels:  hook, hooks
Swifthook
A library to hook methods in Swift and Objective-C.
Stars: ✭ 93 (-95.84%)
Mutual labels:  hooks, hook
Hooks
Async middleware for JavaScript and TypeScript
Stars: ✭ 117 (-94.76%)
Mutual labels:  hooks, hook
React Universal Hooks
🎉 React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
Stars: ✭ 148 (-93.37%)
Mutual labels:  hooks, hook
React Use Wizard
🧙 A React wizard (stepper) builder without the hassle, powered by hooks.
Stars: ✭ 162 (-92.75%)
Mutual labels:  hooks, hook
Use Onclickoutside
React hook for listening for clicks outside of an element.
Stars: ✭ 361 (-83.83%)
Mutual labels:  hooks, hook
Hamsters.js
100% Vanilla Javascript Multithreading & Parallel Execution Library
Stars: ✭ 517 (-76.85%)
Mutual labels:  thread, web-worker
Alloy Worker
面向事务的高可用 Web Worker 通信框架
Stars: ✭ 349 (-84.37%)
Mutual labels:  thread, web-worker
Webhook
webhook is a lightweight incoming webhook server to run shell commands
Stars: ✭ 7,201 (+222.48%)
Mutual labels:  hooks, hook
MouseInjectDetection
Simple method of checking whether or not mouse movement or buttons (<windows 10) are injected
Stars: ✭ 29 (-98.7%)
Mutual labels:  hooks, hook
Radioactive State
☢ Make Your React App Truly Reactive!
Stars: ✭ 273 (-87.77%)
Mutual labels:  hooks, hook
React Selector Hooks
Collection of hook-based memoized selector factories for declarations outside of render.
Stars: ✭ 84 (-96.24%)
Mutual labels:  hooks, hook
React Intersection Observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
Stars: ✭ 2,689 (+20.42%)
Mutual labels:  hooks, hook


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(result);
  };

  return (
    <button type="button" onClick={runSort}>
      Run Sort
    </button>
  );
};

🖼 Live Demo

useworker demo


🐾 Examples

Edit white-glitter-icji4

More examples: https://github.com/alewin/useWorker/tree/develop/example


🔧 Roadmap

  • Kill Web Worker
  • Reactive web worker status
  • Add timeout option
  • Import and use remote script inside useWorker function
  • support Transferable Objects
  • Testing useWorker #41
  • Import and use local script inside useWorker function #37
  • useWorkers Hook #38
  • useWorkerFile Hook #93

🤔 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


💻 Mantainers

💻 Contributors

  • Thanks to:
  • @zant (test, CI, RFC, bugfixes, localdependencies feature, ...)
  • @101arrowz ( isoworker packages proposal )
  • @z4o4z (Typescript implementation, Discussion of RFC)
  • @IljaDaderko (Typescript support, Discussion of RFC)
  • @ophirg (Typescript support)
  • @Pigotz (Discussion of RFC)
  • @gubo97000 (Fix #108)

How to contribute?

Read CONTRIBUTE.md


📜 License

MIT


Netlify Status

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].