https://github.com/aslemammad/react-worker-components
React Worker Components simplify using Web Workers
https://github.com/aslemammad/react-worker-components
Last synced: 9 months ago
JSON representation
React Worker Components simplify using Web Workers
- Host: GitHub
- URL: https://github.com/aslemammad/react-worker-components
- Owner: Aslemammad
- License: mit
- Fork: true (dai-shi/react-worker-components)
- Created: 2020-12-28T12:18:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T13:33:59.000Z (over 4 years ago)
- Last Synced: 2025-01-22T09:32:12.751Z (over 1 year ago)
- Language: TypeScript
- Size: 443 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-worker-components
[](https://github.com/dai-shi/react-worker-components/actions?query=workflow%3ACI)
[](https://www.npmjs.com/package/react-worker-components)
[](https://bundlephobia.com/result?p=react-worker-components)
[](https://discord.gg/MrQdmzd)
React Worker Components simplify using Web Workers
## Introduction
This is an experimental project inspired by
[React Server Component](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html).
I've been developing several libraries to interact with Web Workers.
- [react-hooks-worker](https://github.com/dai-shi/react-hooks-worker)
- [redux-in-worker](https://github.com/dai-shi/redux-in-worker)
- [react-suspense-worker](https://github.com/dai-shi/react-suspense-worker)
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
```bash
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.
```js
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.
```js
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.
```js
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
```javascript
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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**
#### Examples
```javascript
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](https://developer.mozilla.org/docs/Web/JavaScript)**
#### Examples
```javascript
import { wrap } from 'react-worker-components';
const Foo = wrap(() => new Worker('./Foo.worker', { type: 'module' }));
```
## Examples
The [examples](examples) folder contains working examples.
You can run one of them with
```bash
PORT=8080 npm run examples:01_minimal
```
and open in your web browser.