https://github.com/baughmann/react-use-queue
A simple task queue implementation for react
https://github.com/baughmann/react-use-queue
Last synced: 6 days ago
JSON representation
A simple task queue implementation for react
- Host: GitHub
- URL: https://github.com/baughmann/react-use-queue
- Owner: baughmann
- License: mit
- Created: 2020-01-20T18:41:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-08-06T17:13:59.000Z (almost 3 years ago)
- Last Synced: 2025-05-06T08:17:00.986Z (14 days ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-use-queue
- Size: 42 KB
- Stars: 25
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# React useQueue
### A simple job-based asynchronous queue for `react` and `react-native`
A very small and basic implementation of an asyncronous queue. It's an easy way to add jobs to a list and add a callback to be fired when all of the jobs are complete.
While it's not exactly crammed full of features, it's a convenient and lightweight way to do work on unused cycles.
### Example Useage
First, add it to your project as you normally would.
`$ npm i -s react-use-queue`
`import useQueue from "react-use-queue";`
Next, simply use the hook as so.
`const Queue = useQueue();`
Now, you can add tasks:
```
Queue.addJob({
task: () => doSomething()),
});
```
As of `0.5.0` you can also just add callbacks like so
```
Queue.addJob(doSomething),
```
You can even add promises and do something with their result:
```
Queue.addJob({
task: () => doSomething().then(result => doSomethingElse(result)),
});
```
You should think about wrapping the `addJob()` function in a promise:
```
const doSomethingAndReturn = () => {
return new Promise((resolve, reject) => {
Queue.addJob({
task: () => doSomething().then(result => resolve(result)),
});
});
};
```
Which you can then use elsewhere like so...
`const result = await doSomethingAndReturn()`
### Note
If you're on `react` for the web, you can use this queue in your ServiceWorker to do tasks on a background thread. If you're using `react-native` like me, this will execute on the main JS thread, unless the job you're passing spawns it's own thread, like `react-native-ffmpeg` does for example.
### TODO
- Add a built in WebWorker option for web-based use
- Add automated tests
- Automate deployment to NPM
- Automate & host example
- Add arbitrary user data to tasks to allow users to track and organize tasks as they're queued and completed