useSuspenseWebWorker

Use webworker with react suspense and hooks

Install

yarn add use-suspense-webworker

npm install use-suspense-webworker

Usage

import { Suspense, useTransition } from "react";
import useWorker from "use-suspense-webworker";

const myWorker = new Worker("./worker.js");

function Button({ data, onClick }) {
	const read = data.read();

	if (read && read.result && read.result.error) {
		return <div>Error {read.result.error}</div>;
	}

	return (
		<div style={centerStyle}>
			<button onClick={onClick}>Click Me</button>
			<div>Result</div>
			<div>{read && JSON.stringify(read && read.result.data)}</div>
		</div>
	);
}

function Wrapper() {
	const [workerResult, runWorker] = useWorker(myWorker);
	const [startTransition] = useTransition({
		// Wait 20 ms before fallback
		timeoutMs: 20
	});
	return (
		<div className="App">
			<Suspense fallback={<div style={centerStyle}>loading</div>}>
				<Button
					data={workerResult}
					onClick={() => {
						startTransition(() => {
							runWorker([1, 2]);
						});
					}}
				/>
			</Suspense>
		</div>
	);
}

Example

npm run example

then go to http://localhost:1234