react-hooks-worker

react-hooks-worker

React custom hooks for web workers.

Motivation

React Hooks API is promising. Web Workers API is promising.

This is an experimental library to provide an easy way to call web workers. It's more or less for fun, but feedbacks are welcome to make this for production.

Install

npm install react-hooks-worker

Usage

import React from 'react';

import { useWorker } from 'react-hooks-worker';

const calcFib = (x) => {
  const fib = i => (i <= 1 ? i : fib(i - 1) + fib(i - 2));
  return fib(x);
};

const CalcFib: React.FC<{ count: number }> = ({ count }) => {
  const { result, error } = useWorker(calcFib, count);
  if (error) return <div>Error:{error}</div>;
  return <div>Result:{result}</div>;
};

const App = () => (
  <div>
    <CalcFib count={5} />
  </div>
);

Usage with Parcel

Parcel allow your Web Worker script to be automatically bundled. To do this, just pass an instance of the Web Worker instead of the url:

const myWorker = new Worker("./slow_fib.js")

const { result, error } = useWorker(myWorker, count);

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:minimal

and open http://localhost:8080 in your web browser.

You can also try them in codesandbox.io: 01 02 03 04 05

Blogs

• Playing with React Hooks and Web Workers