React-web-worker-hooks NPM

react-web-worker-hooks

React Hooks for integrating web workers

To install:

yarn add react-web-worker-hooks

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]);

    ...
};

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);

    ...
};

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);

    ...
};

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');

    ...
};

@infinitebrahmanuniverse/nolb-react-we @everything-registry/sub-chunk-2623

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago