{"id":13450451,"url":"https://github.com/dai-shi/react-hooks-worker","last_synced_at":"2025-05-16T03:04:34.876Z","repository":{"id":34052732,"uuid":"167810579","full_name":"dai-shi/react-hooks-worker","owner":"dai-shi","description":"React custom hooks for web workers","archived":false,"fork":false,"pushed_at":"2023-03-05T10:28:34.000Z","size":2558,"stargazers_count":711,"open_issues_count":15,"forks_count":16,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-09T10:07:43.865Z","etag":null,"topics":["custom-hook","react","react-hooks","reactjs","webworker","worker"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dai-shi.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,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-01-27T13:15:12.000Z","updated_at":"2025-03-07T02:35:52.000Z","dependencies_parsed_at":"2024-04-11T21:48:43.372Z","dependency_job_id":"f4ac1d92-6a2d-484c-b2f9-8ff54dac17b0","html_url":"https://github.com/dai-shi/react-hooks-worker","commit_stats":{"total_commits":110,"total_committers":5,"mean_commits":22.0,"dds":"0.17272727272727273","last_synced_commit":"62778218671c0d9680ef9d284be7009dfafdd9b2"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-worker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-worker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-worker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dai-shi%2Freact-hooks-worker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dai-shi","download_url":"https://codeload.github.com/dai-shi/react-hooks-worker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459088,"owners_count":22074605,"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":["custom-hook","react","react-hooks","reactjs","webworker","worker"],"created_at":"2024-07-31T07:00:34.752Z","updated_at":"2025-05-16T03:04:29.868Z","avatar_url":"https://github.com/dai-shi.png","language":"TypeScript","funding_links":[],"categories":["Packages","TypeScript"],"sub_categories":[],"readme":"# react-hooks-worker\n\n[![CI](https://img.shields.io/github/workflow/status/dai-shi/react-hooks-worker/CI)](https://github.com/dai-shi/react-hooks-worker/actions?query=workflow%3ACI)\n[![npm](https://img.shields.io/npm/v/react-hooks-worker)](https://www.npmjs.com/package/react-hooks-worker)\n[![size](https://img.shields.io/bundlephobia/minzip/react-hooks-worker)](https://bundlephobia.com/result?p=react-hooks-worker)\n[![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)\n\nReact custom hooks for web workers.\n\n## Introduction\n\nWeb Workers are another thread from the main thread in browsers.\nWe can run heavy computation in a separate thread so that\nusers don't feel slowing down.\n\nReact provides a reactive system.\nThis library hides the async nature of Web Workers with React custom hooks.\nResults returned by Web Workers are stored in a React local state.\n\nDevelopers can implement a worker as:\n\n*   sync function\n*   async function\n*   sync generator function\n*   async generator function\n\n## Install\n\n```bash\nnpm install react-hooks-worker\n```\n\n## Usage\n\nslow_fib.worker.js:\n\n```javascript\nimport { exposeWorker } from 'react-hooks-worker';\n\nconst fib = i =\u003e (i \u003c= 1 ? i : fib(i - 1) + fib(i - 2));\n\nexposeWorker(fib);\n```\n\napp.js:\n\n```javascript\nimport React from 'react';\n\nimport { useWorker } from 'react-hooks-worker';\n\nconst createWorker = () =\u003e new Worker(\n  new URL('./slow_fib.worker', import.meta.url),\n  { type: 'module' }\n);\n\nconst CalcFib = ({ count }) =\u003e {\n  const { result, error } = useWorker(createWorker, count);\n  if (error) return \u003cdiv\u003eError: {error}\u003c/div\u003e;\n  return \u003cdiv\u003eResult: {result}\u003c/div\u003e;\n};\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cCalcFib count={5} /\u003e\n  \u003c/div\u003e\n);\n```\n\n## Recipes\n\n### Pending status\n\nThe communication between main thread and worker thread is not RPC model.\nIt can be one input to return multiple outputs, or\nmultiple inputs to get one output.\n\nHandling pending or stale status is left for library users.\nRefer [#44](https://github.com/dai-shi/react-hooks-worker/issues/44)\nfor a recipe for `isStale`.\n\n## API\n\n\u003c!-- Generated by documentation.js. Update this documentation by updating the source code. --\u003e\n\n### exposeWorker\n\nexpose worker\n\nYou can expose any function that returns:\n\n*   A value\n*   A promise\n*   An iterable\n*   An async iterable\n\n#### Parameters\n\n*   `func` **function (data: any): any** \n*   `getOptions` **function (): WindowPostMessageOptions?** \n\n#### Examples\n\n```javascript\nimport { exposeWorker } from 'react-hooks-worker';\n\nconst fib = (i) =\u003e (i \u003c= 1 ? i : fib(i - 1) + fib(i - 2));\n\nexposeWorker(fib);\n```\n\n### useWorker\n\nuse worker\n\nThe createWorker function should be stable to keep the worker running.\nIf it's referentially changed, it will create a new worker and terminate the old one.\n\n#### Parameters\n\n*   `createWorker` **function (): [Worker](https://developer.mozilla.org/docs/Web/JavaScript)** \n*   `input` **Input** \n*   `getOptions` **function (): WindowPostMessageOptions?** \n\n#### Examples\n\n```javascript\nimport { useWorker } from 'react-hooks-worker';\n\nconst createWorker = () =\u003e new Worker(\n  new URL('./slow_fib.worker', import.meta.url),\n  { type: 'module' }\n);\n\nconst CalcFib = ({ count }) =\u003e {\n  const { result, error } = useWorker(createWorker, count);\n  if (error) return \u003cdiv\u003eError: {error}\u003c/div\u003e;\n  return \u003cdiv\u003eResult: {result}\u003c/div\u003e;\n};\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\n\u003c!--\nYou can also try them in codesandbox.io:\n[01](https://codesandbox.io/s/github/dai-shi/react-hooks-worker/tree/master/examples/01_minimal)\n[02](https://codesandbox.io/s/github/dai-shi/react-hooks-worker/tree/master/examples/02_typescript)\n[03](https://codesandbox.io/s/github/dai-shi/react-hooks-worker/tree/master/examples/03_comparison)\n[04](https://codesandbox.io/s/github/dai-shi/react-hooks-worker/tree/master/examples/04_inline)\n[05](https://codesandbox.io/s/github/dai-shi/react-hooks-worker/tree/master/examples/05_generator)\n--\u003e\n\n## Blogs\n\n*   [Playing with React Hooks and Web Workers](https://blog.axlight.com/posts/playing-with-react-hooks-and-web-workers/)\n*   [How I Developed React Hooks for Web Workers](https://blog.axlight.com/posts/how-i-developed-react-hooks-for-web-workers/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdai-shi%2Freact-hooks-worker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdai-shi%2Freact-hooks-worker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdai-shi%2Freact-hooks-worker/lists"}