{"id":15039685,"url":"https://github.com/alewin/useworker","last_synced_at":"2025-05-12T13:24:48.792Z","repository":{"id":37450431,"uuid":"234785772","full_name":"alewin/useWorker","owner":"alewin","description":"⚛️ useWorker() - A React Hook for Blocking-Free Background Tasks","archived":false,"fork":false,"pushed_at":"2025-04-01T04:34:06.000Z","size":3083,"stargazers_count":3046,"open_issues_count":21,"forks_count":107,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-05-11T05:46:29.214Z","etag":null,"topics":["background","hook","hooks","react","thread","typescript-library","useworker","web-worker","web-worker-react","web-workers"],"latest_commit_sha":null,"homepage":"https://useworker.js.org/","language":"JavaScript","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/alewin.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-01-18T19:27:40.000Z","updated_at":"2025-05-08T00:37:39.000Z","dependencies_parsed_at":"2024-06-18T12:16:26.377Z","dependency_job_id":"ca8c64ae-4964-452e-90cf-e54cfdd160f7","html_url":"https://github.com/alewin/useWorker","commit_stats":{"total_commits":231,"total_committers":21,"mean_commits":11.0,"dds":"0.34199134199134196","last_synced_commit":"3bf3e1341ea1ee7954068672151a13ef2ccdcda9"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alewin%2FuseWorker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alewin%2FuseWorker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alewin%2FuseWorker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alewin%2FuseWorker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alewin","download_url":"https://codeload.github.com/alewin/useWorker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745955,"owners_count":21957475,"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":["background","hook","hooks","react","thread","typescript-library","useworker","web-worker","web-worker-react","web-workers"],"created_at":"2024-09-24T20:43:37.205Z","updated_at":"2025-05-12T13:24:48.761Z","avatar_url":"https://github.com/alewin.png","language":"JavaScript","readme":"\n\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg width=\"300px\" src=\"logo.png\" alt=\"useWorker\"\n    title=\"useWorker() Use web workers with react hook\" /\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch2 align=\"center\"\u003e\n  Use web workers with react hook\n  \u003cbr /\u003e\n  https://useworker.js.org/  \n  \u003ca\n    href=\"https://twitter.com/intent/tweet?text=useWorker - Use web workers with react hooks\u0026url=https://github.com/alewin/useWorker\u0026via=alessiokoci\u0026hashtags=react,useworker,hooks,javascript\"\u003e\n    \u003cbr /\u003e\n    \u003cimg alt=\"Tweet\" src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\" /\u003e\n  \u003c/a\u003e\n\n\u003c/h2\u003e\n\n\n\n\u003ch3 align=\"center\"\u003e\n  \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/npm/dm/@koale/useworker\" /\u003e\n  \u003cimg alt=\"size\" src=\"https://img.shields.io/bundlephobia/minzip/@koale/useworker/2.1.0\" /\u003e\n  \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/npm/l/@koale/useworker\" /\u003e\n \u003cimg src=\"https://badgen.net/npm/types/tslib\" alt=\"TypeScript Support\" title=\"TypeScript Support\" data-canonical-src=\"https://badgen.net/badge/TypeScript/Support\" style=\"max-width:100%;\"\u003e\n\u003c/h3\u003e\n\n---\n\n## 🎨 Features\n\n- Run expensive function **without blocking UI** ([Show live gif](https://github.com/alewin/useWorker/issues/2))\n- Supports **Promises** pattern instead of event-messages\n- Size: less than `3KB`!\n- Clear [API](https://useworker.js.org/docs/api-useworker#options-api) using hook\n- Typescript support\n- Garbage collector web worker instance\n- [Remote dependencies](https://useworker.js.org/docs/api-useworker#options-api) option\n- [timeout](https://useworker.js.org/docs/api-useworker#options-api) option\n\n---\n\n## 💾 [Install](https://www.npmjs.com/package/@koale/useworker)\n\n- **@latest**\n\n```bash\nnpm install --save @koale/useworker\n```\n\n---\n\n## 🔨 Import\n\n```jsx\nimport { useWorker, WORKER_STATUS } from \"@koale/useworker\";\n```\n\n---\n\n## 📙 Documents\n\n- [Getting Started](https://useworker.netlify.com/docs/introduction/)\n- [APIs](https://useworker.netlify.com/docs/api-useworker)\n- [Examples](https://useworker.netlify.com/docs/examples/examples-sort)\n- [Limitations](https://useworker.netlify.com/docs/limitations)\n\n---\n\n## 🍞 Demo\n\n- [Sorting](https://icji4.csb.app/sorting): Sorting 50000 random numbers\n- [Csv](https://icji4.csb.app/csv): Generate Csv, Parse Csv, Convert to JSON\n- [External Dependencies](https://icji4.csb.app/external) Use external scripts inside WebWorker\n\n---\n\n## ⚙ Web Workers\n\nBefore you start using this [hook](https://www.npmjs.com/package/@koale/useworker), I suggest you to read the [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) documentation.\n\n---\n\n## 🐾 Usage\n\n```jsx\nimport React from \"react\";\nimport { useWorker } from \"@koale/useworker\";\n\nconst numbers = [...Array(5000000)].map((e) =\u003e ~~(Math.random() * 1000000));\nconst sortNumbers = (nums) =\u003e nums.sort();\n\nconst Example = () =\u003e {\n  const [sortWorker] = useWorker(sortNumbers);\n\n  const runSort = async () =\u003e {\n    const result = await sortWorker(numbers); // non-blocking UI\n    console.log(result);\n  };\n\n  return (\n    \u003cbutton type=\"button\" onClick={runSort}\u003e\n      Run Sort\n    \u003c/button\u003e\n  );\n};\n```\n\n---\n\n## 🖼 Live Demo\n\n\u003cimg alt=\"useworker demo\" src=\"https://user-images.githubusercontent.com/980844/82120716-70151e00-9788-11ea-8f8d-07b06a13dde2.gif\" /\u003e\n\n---\n\n## 🐾 Examples\n\n[![Edit white-glitter-icji4](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/white-glitter-icji4?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\nMore examples: https://github.com/alewin/useWorker/tree/develop/example\n\n---\n\n## 🔧 Roadmap\n\n- [x] Kill Web Worker\n- [x] Reactive web worker status\n- [x] Add timeout option\n- [x] Import and use remote script inside `useWorker` function\n- [x] support [Transferable Objects](https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects)\n- [x] Testing useWorker [#41](https://github.com/alewin/useWorker/issues/41)\n- [x] Import and use local script inside `useWorker` function [#37](https://github.com/alewin/useWorker/issues/37)\n- [ ] useWorkers Hook [#38](https://github.com/alewin/useWorker/issues/38)\n- [ ] useWorkerFile Hook [#93](https://github.com/alewin/useWorker/issues/93)\n\n---\n\n## 🤔 Motivation and Limitations\n\nMost react projects are initialized through [Create React App](https://github.com/facebook/create-react-app).\nCRA unfortunately does not offer support for webworkers, unless you eject and change the webpack configuration manually.\n\nThis library allows you to use web workers without having to change the CRA configuration, which is why there are often limitations or particular workarounds.\n\nIf you are interested in changing the webpack configuration to manually manage your workers, see: [worker-loader](https://github.com/webpack-contrib/worker-loader)\n\n---\n\n## Known issues\n\nThere's a known issue related to transpiling tools such as Babel causing `Not refereced` errors.\n\nSince the approach of this library is moving the entire function passed to the Hook to a worker, if the function gets transpiled, variable definitions used by the transpiling tool may get out of scope when the function gets moved to the worker, causing unexpected reference errors.\n\nIf you're experimenting this type of issue, one workaround is wrapping your function declaration inside a function object as a string.\n\n```js\nconst sum = new Function(`a`, `b`, `return a + b`);\n```\n\n---\n\n## 🌏 Contribute? Bug? New Feature?\n\nThe library is experimental so if you find a **bug** or would like to request a new **feature**, open an [issue](https://github.com/alewin/useWorker/issues/new)\n\n---\n\n## 💡 Similar Projects\n\n- [greenlet](https://github.com/developit/greenlet/)\n- [react-hooks-worker](https://github.com/dai-shi/react-hooks-worker)\n\n---\n\n## 💻 Mantainers\n\n- [@naorpeled](https://github.com/naorpeled)\n- [@alewin](https://github.com/alewin)\n- [@zant](https://github.com/zant)\n\n## 💻 Contributors\n\n- Thanks to:\n- [@zant](https://github.com/zant) (test, CI, `RFC`, bugfixes, `localdependencies` feature, ...)\n- [@101arrowz](https://github.com/101arrowz) ( `isoworker` packages proposal )\n- [@z4o4z](https://github.com/z4o4z) (`Typescript` implementation, Discussion of `RFC`)\n- [@IljaDaderko](https://github.com/IljaDaderko) (`Typescript` support, Discussion of `RFC`)\n- [@ophirg](https://github.com/ophirg) (`Typescript` support)\n- [@Pigotz](https://github.com/Pigotz) (Discussion of `RFC`)\n- [@gubo97000](https://github.com/gubo97000) (Fix [#108](https://github.com/alewin/useWorker/issues/108))\n\n_How to contribute?_\n\nRead [CONTRIBUTE.md](docs/CONTRIBUTE.md)\n\n---\n\n## 📜 License\n\n[MIT](https://github.com/alewin/useWorker/blob/develop/LICENSE)\n\n---\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/833cd6b2-6e74-47f0-aa85-5f14aea8ea35/deploy-status)](https://app.netlify.com/sites/useworker/deploys)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falewin%2Fuseworker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falewin%2Fuseworker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falewin%2Fuseworker/lists"}