📃 Added useForm (#40)

* 📃 Added useForm

* 🦾 Linting Fixes

Author: aromalanil

docs/README.md

@@ -3,6 +3,7 @@
 ## 📗 Index
 
 - [useLocalStorage](#-uselocalstorage)
+- [useForm](#-useform)
 - [useStack](#-usestack)
 - [useQueue](#-usequeue)
 - [useDebounce](#-usedebounce)
@@ -51,6 +52,42 @@ const LocalValue = () => {
 
 </br>
 
+## 📃 useForm
+
+Custom hook to create controlled form component.
+
+### Usage
+
+```jsx
+import React from "react";
+import { useForm } from "use-custom-hooks";
+
+const Form = () => {
+  const [values, onChange] = useLocalStorage({name:"",age:12});
+
+  return (
+    <form>
+      <input type="text" name="name" value={values.name} onChange={onChange}/>
+      <input type="number" name="age" value={values.age} onChange={onChange}/>
+    </form>
+  );
+};
+```
+
+### Parameters
+
+1. `initialValue` (_Object_) : State object with name of each form input as keys and corresponding initial state as values.
+
+### Return value
+
+`[values,onChange]`
+
+1. `values` (_Object_) : Values of input components.
+2. `onChange` (_function_) : Function to be added to onChange event of input component.
+
+</br>
+
+
 ## 📚 useStack
 Hook for creating and managing Stack.
 

hooks/useForm.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+/**
+ *
+ * Custom hook to create controlled form component.
+ *
+ * @param {Object} initialState State object with name of each form input as keys and
+ * corresponding initial state as values.
+ * @return {Array} Array containing values and onChange function respectively.
+ */
+const useForm = (initialValues) => {
+  const [values, setValues] = useState(initialValues);
+
+  const onChange = (event) => {
+    setValues((previousValues) => ({ ...previousValues, [event.target.name]: event.target.value }));
+  };
+
+  return [values, onChange];
+};
+
+export default useForm;

index.js

@@ -1,9 +1,10 @@
+export { default as useForm } from './hooks/useForm';
 export { default as useState } from './hooks/useStack';
+export { default as useQueue } from './hooks/useQueue';
 export { default as useToggle } from './hooks/useToggle';
 export { default as useDarkMode } from './hooks/useDarkMode';
+export { default as usePrevious } from './hooks/usePrevious';
 export { default as useDebounce } from './hooks/useDebounce';
 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.7.0",
+  "version": "1.8.0",
   "description": "A collection of Custom Hooks for React.",
   "main": "index.js",
   "scripts": {