🚀 Try the Live Playground Demo!
Effortless, scalable web worker pools for React.
Supercharge your React apps with parallelism and keep your UI buttery smooth. Powered by comlink-worker-pool — now with a beautiful, idiomatic hook-based API for React developers.
- Blazing fast UI: Run CPU-intensive tasks in parallel, outside the main thread.
- Zero boilerplate: Integrate worker pools with a single hook.
- TypeScript first: Full type safety and autocompletion.
- Seamless DX: Designed for React, by React devs.
- Works using comlink-worker-pool underneath.
- 🪝
useWorkerPool()
React hook for easy worker pool integration - 🧑💻 Simple, declarative API
- 🛡️ TypeScript support out of the box
- ⚡ Automatic pool management & lifecycle handling
- 🔄 Real-time status, results, and error tracking
- 🧩 Works with any Comlink-compatible worker
Install:
npm install comlink-worker-pool-react comlink-worker-pool
or
yarn add comlink-worker-pool-react comlink-worker-pool
- Create your worker (e.g.,
worker.ts
)
// worker.ts
import { expose } from "comlink";
const api = {
add: async (a: number, b: number) => a + b,
};
expose(api);
- Use the hook in your React component:
import { useWorkerPool } from "comlink-worker-pool-react";
import { wrap } from "comlink";
type Api = {
add: (a: number, b: number) => Promise<number>;
};
const { api, status, result, error, call } = useWorkerPool<Api>({
workerFactory: () => new Worker(new URL("./worker", import.meta.url)),
proxyFactory: (worker) => wrap<Api>(worker),
poolSize: 2,
});
return (
<div>
<button
onClick={async () => {
await call("add", 2, 3);
}}
>
Add 2 + 3
</button>
{status}
{result && <div>Result: {result}</div>}
{error && <div>Error: {String(error)}</div>}
</div>
);
💡 Tip: Try the live playground demo for a full working example!
Ready to make your React apps faster and smoother? Install comlink-worker-pool-react
today and experience effortless parallelism.
Made with ❤️ by @natanelia