use-worker-async

online demo

Install

pnpm i use-worker-async

Usage

import { exportWorker } from "use-worker-async";

function fibonacci(n: number): number {
    if (n === 1) {
        return 1
    }

    if (n === 2) {
        return 2
    }

    return fibonacci(n - 1) + fibonacci(n - 2)
}

export default exportWorker(fibonacci);

import React from 'react'
import { useState } from 'react'
import useWorker from 'use-worker-async'
import reactLogo from './assets/react.svg'
import './App.css'
import fibonacci from './fibonacci'

const createWorker = () => new Worker(new URL('./fibonacci', import.meta.url), {
  type: 'module'
})

function App() {
  const [count, setCount] = useState(0)

  const {workerRunner, workerController} = useWorker<typeof fibonacci>(createWorker)

  async function handleClick() {
    console.log(await workerRunner(10))
  }

  return (
    <div className="App">
      <div>hello world</div>
      <button onClick={handleClick}>compute</button>
    </div>
  )
}

export default App

useWorker accept second parameter, it can auto terminate when your worker finished (success or fail).

const {
    workerRunner, 
    workerController
} = useWorker<typeof fibonacci>(createWorker, {autoTerminate: true})

And you can manual terminate:

workerController.killWorker()

You can show worker status by reading workerController.workerStatus, Its value will be one of :

export enum WORKER_STATUS {
    PENDING = 'PENDING',
    RUNNING = 'RUNNING',
    SUCCESS = 'SUCCESS',
    ERROR = 'ERROR',
}

Preview

pnpm example