use-suspense-webworker

1.0.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i use-suspense-webworker

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

6.26 kB

Total Files

7

Last publish

Collaborators

  • tiansijie