🛒Added the useQueue Hook (#37)

* 🛒 add useQueue Hook

* 🛒add useQueue to readme and docs

* Update hooks/useQueue.js

Co-authored-by: Aromal Anil <aromalanilkannan@gmail.com>

* Update hooks/useQueue.js

Co-authored-by: Aromal Anil <aromalanilkannan@gmail.com>

* 🔧 Update version to 1.7.0

Co-authored-by: Aromal Anil <aromalanilkannan@gmail.com>

Author: MuriloucoLouco

README.md

@@ -45,6 +45,7 @@ yarn add use-custom-hooks
 ## 📘 Available Hooks
 
 - [useStack](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usestack)
+- [useQueue](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usequeue)
 - [useToggle](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usetoggle)
 - [usePrevious](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-useprevious)
 - [useDebounce](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usedebounce)

docs/README.md

@@ -4,6 +4,7 @@
 
 - [useLocalStorage](#-uselocalstorage)
 - [useStack](#-usestack)
+- [useQueue](#-usequeue)
 - [useDebounce](#-usedebounce)
 - [useDarkMode](#-usedarkmode)
 - [useToggle](#-usetoggle)
@@ -93,6 +94,42 @@ const LocalValue = () => {
 
 </br>
 
+## 🛒 useQueue
+Very similar to useStack, this hook creates and manages queues.
+
+### Usage
+
+```jsx
+import React from 'react';
+import { useQueue } from 'use-custom-hooks';
+
+function Queue() {
+  const [queue, enqueue, dequeue] = useQueue([]);
+  const generateNumber = () => Math.round(Math.random()*100);
+  return (
+    <div>
+      <h1>{queue.map(item => ` ${item} `)}</h1>
+      <button onClick={() => enqueue(generateNumber())}>Enqueue</button>
+      <button onClick={dequeue}>Dequeue</button>
+    </div>
+  );
+}
+```
+
+### Parameters
+
+1. `initialValue` (_Array_) : Initial value of the queue.
+
+### Return value
+
+`[queue,enqueue,dequeue]`
+
+1. `queue` (_Array_) : The created queue.
+2. `enqueue` (_function_) : Function to add an element to the rear of the queue.
+3. `dequeue` (_function_) : Function to remove last element from the queue.
+
+</br>
+
 ## 🏀 useDebounce
 
 Convert a normal function to a debounced function.

hooks/useQueue.js

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+/**
+ * Custom hook for creating and managing Queues.
+ *
+ * @param {Array} initialValue Initial value of the queue.
+ * @return {Array} Array containing the queue, enqueue and dequeue functions respectively.
+ */
+const useQueue = (initialValue) => {
+  const [queue, setQueue] = useState(initialValue);
+
+  /**
+   * Function to add a value to the rear of the queue.
+   *
+   * @param {any} value Value to be added to the queue.
+   * @returns {undefined} This function returns nothing.
+   */
+  const enqueue = (value) => {
+    setQueue([...queue, value]);
+  };
+
+  /**
+   * Function to remove the value in the front of the queue.
+   *
+   * @returns {any} The value removed from the queue.
+   */
+  const dequeue = () => {
+    if (queue.length > 0) {
+      const newQueue = [...queue];
+      const dequeuedValue = newQueue.shift();
+      setQueue(newQueue);
+      return dequeuedValue;
+    }
+    return undefined;
+  };
+
+  return [queue, enqueue, dequeue];
+};
+
+export default useQueue;

index.js

@@ -6,3 +6,4 @@ export { default as useGeoLocation } from './hooks/useGeoLocation';
 export { default as useLocalStorage } from './hooks/useLocalStorage';
 export { default as useMousePosition } from './hooks/useMousePosition';
 export { default as usePrevious } from './hooks/usePrevious';
+export { default as useQueue } from './hooks/useQueue';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-custom-hooks",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "A collection of Custom Hooks for React.",
   "main": "index.js",
   "scripts": {