Need help with react-worker-components?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dai-shi
146 Stars 4 Forks MIT License 23 Commits 1 Opened issues

Description

React Worker Components simplify using Web Workers

Services available

!
?

Need anything else?

Contributors list

# 29,024
Redux
reactjs
TypeScr...
hooks-a...
21 commits

react-worker-components

CI npm size discord

React Worker Components simplify using Web Workers

Introduction

This is an experimental project inspired by React Server Component.

I've been developing several libraries to interact with Web Workers.

While they provide various interfaces with good abstraction, RSC style would be another approach which is useful for Web Workers.

RWC is a library to provide RSC-like interface for Web Workers. It serializes React elements keeping their referential identities as much as possible. If a React component is "registered", it will be referenced by string names, and it can be used at the both ends.

Project Status: Experimental but basic examples are working. Welcome to try realistic examples.

Install

npm install react-worker-components

Usage

TextBox.js

This is a component that can be used in the RWC tree.

register
is important to enable serialization.
import React, { useState } from 'react';

import { register } from 'react-worker-components';

export const TextBox = () => { const [text, setText] = useState(''); return (

Text: {text} setText(event.target.value)} />
); };

register(TextBox, 'TextBox');

Hello.worker.js

This is a component that runs only on web workers.

expose
is necessary to communicate with the main thread.
import React from 'react';

import { expose } from 'react-worker-components';

import { TextBox } from './TextBox';

const fib = (i) => (i <= 1 ? i : fib(i - 1) + fib(i - 2));

const Hello = ({ count, children }) => { const fibNum = fib(count); return (

Hello from worker: {fibNum}

Main TextBox

{children}

Worker TextBox

); };

expose(Hello);

App.js

This is the entry point component in the main thread.

wrap
is to communicate with the worker thread.
import React, { Suspense, useState } from 'react';

import { wrap } from 'react-worker-components';

import { TextBox } from './TextBox';

const Hello = wrap(() => new Worker('./Hello.worker', { type: 'module' }));

export const App = () => { const [count, setCount] = useState(1); return (

Count: {count} setCount(count + 1)}>+1 setCount((c) => c - 1)}>-1
); };

API

expose

Expose a React function component from web workers.

Parameters

  • Component
    React.FC<Props>

Examples

import { expose } from 'react-worker-components';

const Foo = () => { return

Foo

; };

expose(Foo); // in worker file

register

Register a component with a string name

This allows serializing components between main and worker threads.

Parameters

  • component
    AnyComponent
  • name
    string

Examples

import { register } from 'react-worker-components';

const Counter = () => { const [count, setCount] = useState(0); return

{count} setCount(1)}>1

; };

register(Counter, 'Counter');

wrap

Wrap an exposed component in main thread

This will connect the component in the worker thread. Requires Suspense.

Parameters

  • createWorker
    function (): Worker

Examples

import { wrap } from 'react-worker-components';

const Foo = wrap(() => new Worker('./Foo.worker', { type: 'module' }));

Examples

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

PORT=8080 npm run examples:01_minimal

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.