{"id":15311746,"url":"https://github.com/aslemammad/react-worker-components","last_synced_at":"2025-10-08T21:30:30.292Z","repository":{"id":105997413,"uuid":"325004527","full_name":"Aslemammad/react-worker-components","owner":"Aslemammad","description":"React Worker Components simplify using Web Workers","archived":false,"fork":true,"pushed_at":"2022-02-12T13:33:59.000Z","size":454,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T09:32:12.751Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"dai-shi/react-worker-components","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aslemammad.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-12-28T12:18:16.000Z","updated_at":"2022-02-08T09:02:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"c688d488-97ac-4d39-82f2-bbfd45a09a0c","html_url":"https://github.com/Aslemammad/react-worker-components","commit_stats":{"total_commits":23,"total_committers":3,"mean_commits":7.666666666666667,"dds":0.08695652173913049,"last_synced_commit":"997ae971117fafccb68f77b888a3f01ed080339f"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aslemammad%2Freact-worker-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aslemammad%2Freact-worker-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aslemammad%2Freact-worker-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aslemammad%2Freact-worker-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aslemammad","download_url":"https://codeload.github.com/Aslemammad/react-worker-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235761791,"owners_count":19041406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T08:34:22.259Z","updated_at":"2025-10-08T21:30:29.872Z","avatar_url":"https://github.com/Aslemammad.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-worker-components\n\n[![CI](https://img.shields.io/github/workflow/status/dai-shi/react-worker-components/CI)](https://github.com/dai-shi/react-worker-components/actions?query=workflow%3ACI)\n[![npm](https://img.shields.io/npm/v/react-worker-components)](https://www.npmjs.com/package/react-worker-components)\n[![size](https://img.shields.io/bundlephobia/minzip/react-worker-components)](https://bundlephobia.com/result?p=react-worker-components)\n[![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)\n\nReact Worker Components simplify using Web Workers\n\n## Introduction\n\nThis is an experimental project inspired by\n[React Server Component](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html).\n\nI've been developing several libraries to interact with Web Workers.\n\n-   [react-hooks-worker](https://github.com/dai-shi/react-hooks-worker)\n-   [redux-in-worker](https://github.com/dai-shi/redux-in-worker)\n-   [react-suspense-worker](https://github.com/dai-shi/react-suspense-worker)\n\nWhile they provide various interfaces with good abstraction,\nRSC style would be another approach which is useful for Web Workers.\n\nRWC is a library to provide RSC-like interface for Web Workers.\nIt serializes React elements keeping their referential identities\nas much as possible.\nIf a React component is \"registered\", it will be referenced by string names,\nand it can be used at the both ends.\n\nProject Status: Experimental but basic examples are working. Welcome to try realistic examples.\n\n## Install\n\n```bash\nnpm install react-worker-components\n```\n\n## Usage\n\n### `TextBox.js`\n\nThis is a component that can be used in the RWC tree.\n`register` is important to enable serialization.\n\n```js\nimport React, { useState } from 'react';\n\nimport { register } from 'react-worker-components';\n\nexport const TextBox = () =\u003e {\n  const [text, setText] = useState('');\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003eText: {text}\u003c/span\u003e\n      \u003cinput value={text} onChange={(event) =\u003e setText(event.target.value)} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nregister(TextBox, 'TextBox');\n```\n\n### `Hello.worker.js`\n\nThis is a component that runs only on web workers.\n`expose` is necessary to communicate with the main thread.\n\n```js\nimport React from 'react';\n\nimport { expose } from 'react-worker-components';\n\nimport { TextBox } from './TextBox';\n\nconst fib = (i) =\u003e (i \u003c= 1 ? i : fib(i - 1) + fib(i - 2));\n\nconst Hello = ({ count, children }) =\u003e {\n  const fibNum = fib(count);\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eHello from worker: {fibNum}\u003c/div\u003e\n      \u003ch1\u003eMain TextBox\u003c/h1\u003e\n      {children}\n      \u003ch1\u003eWorker TextBox\u003c/h1\u003e\n      \u003cTextBox /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexpose(Hello);\n```\n\n### `App.js`\n\nThis is the entry point component in the main thread.\n`wrap` is to communicate with the worker thread.\n\n```js\nimport React, { Suspense, useState } from 'react';\n\nimport { wrap } from 'react-worker-components';\n\nimport { TextBox } from './TextBox';\n\nconst Hello = wrap(() =\u003e new Worker('./Hello.worker', { type: 'module' }));\n\nexport const App = () =\u003e {\n  const [count, setCount] = useState(1);\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003eCount: {count}\u003c/span\u003e\n      \u003cbutton type=\"button\" onClick={() =\u003e setCount(count + 1)}\u003e+1\u003c/button\u003e\n      \u003cbutton type=\"button\" onClick={() =\u003e setCount((c) =\u003e c - 1)}\u003e-1\u003c/button\u003e\n      \u003cSuspense fallback=\"Loading...\"\u003e\n        \u003cHello count={count}\u003e\n          \u003cTextBox /\u003e\n        \u003c/Hello\u003e\n      \u003c/Suspense\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## API\n\n\u003c!-- Generated by documentation.js. Update this documentation by updating the source code. --\u003e\n\n### expose\n\nExpose a React function component from web workers.\n\n#### Parameters\n\n-   `Component` **React.FC\u0026lt;Props\u003e** \n\n#### Examples\n\n```javascript\nimport { expose } from 'react-worker-components';\n\nconst Foo = () =\u003e {\n  return \u003ch1\u003eFoo\u003c/h1\u003e;\n};\n\nexpose(Foo); // in worker file\n```\n\n### register\n\nRegister a component with a string name\n\nThis allows serializing components between main and worker threads.\n\n#### Parameters\n\n-   `component` **AnyComponent** \n-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** \n\n#### Examples\n\n```javascript\nimport { register } from 'react-worker-components';\n\nconst Counter = () =\u003e {\n  const [count, setCount] = useState(0);\n  return \u003cdiv\u003e{count}\u003cbutton onClick={() =\u003e setCount(1)}\u003e1\u003c/button\u003e\u003c/div\u003e;\n};\n\nregister(Counter, 'Counter');\n```\n\n### wrap\n\nWrap an exposed component in main thread\n\nThis will connect the component in the worker thread.\nRequires Suspense.\n\n#### Parameters\n\n-   `createWorker` **function (): [Worker](https://developer.mozilla.org/docs/Web/JavaScript)** \n\n#### Examples\n\n```javascript\nimport { wrap } from 'react-worker-components';\n\nconst Foo = wrap(() =\u003e new Worker('./Foo.worker', { type: 'module' }));\n```\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open \u003chttp://localhost:8080\u003e in your web browser.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faslemammad%2Freact-worker-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faslemammad%2Freact-worker-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faslemammad%2Freact-worker-components/lists"}