Skip to content

HamzaKV/react-web-worker-hook

Repository files navigation

react-web-worker-hooks

React Hooks for integrating web workers

NPM Version NPM Downloads Commit Activity

Code Size TypeScript React

To install:

yarn add react-web-worker-hooks

or

npm install react-web-worker-hooks

Specifications

useWorker

Parameters

Argument Type Description
fn(e, args) (e: any, args: any) => T | null | void | Promise<T | null | void> Function that needs to be run in parallel. Provides reference to the web worker event and external args.
dependencies any[] | null | undefined Dependencies for hook effect.
args { ...[key]: value... } Object of arguments to be provided to the worker function. Note: args can only be numbers, strings, or an object of numbers/strings

Returns

Return Type Description
status 'busy' | 'success' | 'error' Status of worker thread.
data T | null | undefined | Promise<T | null | undefined> Data returned from worker thread. T references Generic type for typescript
error Error | null Exception thrown by worker thread.
runWorker Function Function to execute worker.

useWorkerPool

Parameters

Argument Type Description
fn(e, args) (e: any, args: any) => T | null | void | Promise<T | null | void> Function that needs to be run in parallel. Provides reference to the web worker event and external args.
dependencies any[] | null | undefined Dependencies for hook effect.
args { ...[key]: value... } Object of arguments to be provided to the worker function. Note: args can only be numbers, strings, or an object of numbers/strings
workers number Number of workers to be spawned.

Returns

Return Type Description
state { status, data, error } State of all worker threads.
runWorkerPool Function Function to execute worker pool.

useWorkerPoolResult

Parameters

Argument Type Description
fn(e, args) (e: any, args: any) => T | null | void | Promise<T | null | void> Function that needs to be run in parallel. Provides reference to the web worker event and external args.
dependencies any[] | null | undefined Dependencies for hook effect.
args { ...[key]: value... } Object of arguments to be provided to the worker function. Note: args can only be numbers, strings, or an object of numbers/strings
workers number Number of workers to be spawned.

Returns

Return Type Description
status 'busy' | 'success' | 'error' Status of worker thread.
data T[] | null | undefined | Promise<T[] | null | undefined> Data returned from worker threads. T references Generic type for typescript
error Error | null Exception thrown by first worker thread.
runWorkerPool Function Function to execute worker pool.

useSharedWorker

Parameters

Argument Type Description
workerName string Name of worker. If defined previously, will subscribe to worker otw instantiate new one.
sharedObj { ...[key]: value... } Object to be shared with subscribers of the shared worker. Required when registering a new worker. Note: sharedObj can only be numbers, strings, or an object of numbers/strings
fn(e, sharedObj) (e: any, sharedObj: any) => any Function that will execute when the worker receives a message. Required when registering a new worker.

Returns

Return Type Description
status 'idle' | 'success' | 'error' | 'sending' | 'sent' Status of worker thread.
data T | null | undefined> Data returned from worker thread. T references Generic type for typescript
error Error | null Exception thrown by worker thread.
dispatch (message: any) => void Function to dispatch a message to the web worker that will execute fn. The message will be propogated to all subscribers except the dispatcher.

Usage

useWorker

import { useWorker } from 'react-web-worker-hooks';

export default () => {
    ...

    const [status, data, error] = useWorker((e, args) => {
        //code to execute in parallel
        const { ... } = args;

        value = ...

        //expected return value
        return value;
    }, [...dependencies], {...args});

    useEffect(() => {
        //running tasks based on return value from worker
    }, [status, data, error]);

    ...
};

or

import { useWorker } from 'react-web-worker-hooks';

export default () => {
    ...

    const [status, data, error] = useWorker(async (e, args) => {
        //code to execute in parallel
        const { ... } = args;

        value = await ...

        //expected return value
        return value;
    }, [...dependencies], {...args});

    useEffect(() => {
        //running tasks based on return value from worker
    }, [status, data, error]);

    ...
};

useWorkerPool

import { useWorkerPool } from 'react-web-worker-hooks';

export default () => {
    ...

    const [state] = useWorkerPool((e, args) => {
        //code to execute in parallel
        const { ... } = args;

        value = ...

        //expected return value
        return value;
    }, [...dependencies], {...args}, nWorkers);

    ...
};

or

import { useWorkerPool } from 'react-web-worker-hooks';

export default () => {
    ...

    const [state] = useWorkerPool(async (e, args) => {
        //code to execute in parallel
        const { ... } = args;

        value = await ...

        //expected return value
        return value;
    }, [...dependencies], {...args}, nWorkers);

    ...
};

useWorkerPoolResult

import { useWorkerPoolResult } from 'react-web-worker-hooks';

export default () => {
    ...

    const [status, data, error] = useWorkerPoolResult((e, args) => {
        //code to execute in parallel
        const { ... } = args;

        value = ...

        //expected return value
        return value;
    }, [...dependencies], {...args}, nWorkers);

    ...
};

or

import { useWorkerPoolResult } from 'react-web-worker-hooks';

export default () => {
    ...

    const [status, data, error] = useWorkerPoolResult(async (e, args) => {
        //code to execute in parallel
        const { ... } = args;

        value = await ...

        //expected return value
        return value;
    }, [...dependencies], {...args}, nWorkers);

    ...
};

useSharedWorker

import { useSharedWorker } from 'react-web-worker-hooks';

export default () => {
    ...

    const [status, data, error, dispatch] = useSharedWorker('websocket', { socket }, (e, sharedObj) => {
        //code to execute in parallel
        const { socket, ... } = sharedObj;

        const message = e.data;
        let value;

        if (message === 'DELETE') {
            socket = null;
            value = 'DISCONNECTED';
        }
        else ...

        //expected return value
        return value;
    });

    useEffect(() => {
        //running tasks based on return value from worker
    }, [status, data, error]);

    //some action to be dispatched to the worker
    const onClick = () => dispatch('DELETE');

    ...
};

Releases

No releases published

Packages

No packages published