react-web-worker-hooks

React Hooks for integrating web workers


!TypeScript
!React

$3

yarn add react-web-worker-hooks

or

npm install react-web-worker-hooks

Specifications

$3

#### Parameters

| Argument | Type | Description |
| -------- | ---- | ----------- |
| fn(e, args) | (e: any, args: any) => T \| null \| void \| Promise | 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 | 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. |

$3

#### Parameters

| Argument | Type | Description |
| -------- | ---- | ----------- |
| fn(e, args) | (e: any, args: any) => T \| null \| void \| Promise | 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. |

$3

#### Parameters

| Argument | Type | Description |
| -------- | ---- | ----------- |
| fn(e, args) | (e: any, args: any) => T \| null \| void \| Promise | 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 | 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. |

$3

#### 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

$3

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

...
};
`

$3


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

...
};
`

$3


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

...
};
`

$3


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

...
};
``