From e4b2594cb65332df2e131546eaf6de9643b10b77 Mon Sep 17 00:00:00 2001
From: minu1994 <emanuele2794@gmail.com>
Date: Fri, 23 Dec 2022 20:25:36 +0100
Subject: [PATCH] handle additional onChange

---
 README.md         | 21 +++++++++++++++++++++
 demo/src/App.js   |  2 +-
 src/useInputs.tsx | 10 ++++++++--
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 48151d8..c8a3f69 100644
--- a/README.md
+++ b/README.md
@@ -217,6 +217,27 @@ function App() {
     );
 }
 ```
+### additional onChange (available from v1.1.0)
+You may want to add additional onChange functions when you write into input.
+<br/>
+You can do that by adding your onChange from object. Note that you will get the value as always.
+<br/>
+Example:
+```js
+const [surname, inputSurname] = useInput({
+    defaultValue: test,
+   onChange: (e) => console.log("print the event: ", e)
+})
+```
+same for `useInputCheckbox`
+```js
+const [checkbox, inputCheckbox] = useInputCheckbox({
+    defaultChecked: true,
+   onChange: (e) => {
+        console.log("additional function. Print event: ", e)
+   }
+})
+```
 
 ## 💻 Demo
 
diff --git a/demo/src/App.js b/demo/src/App.js
index e2f176e..709e412 100644
--- a/demo/src/App.js
+++ b/demo/src/App.js
@@ -5,7 +5,7 @@ import {
 } from "./lib";
 
 // if input props will not change, you can declare them outside the render cycle for better performance.
-const surnameProps = {style: {background: "azure"}, placeholder: "insert some text here..",}
+const surnameProps = {style: {background: "azure"}, placeholder: "insert some text here..", onChange: (e) => console.log(e)}
 
 function App() {
   const [name, inputName] = useInput(
diff --git a/src/useInputs.tsx b/src/useInputs.tsx
index 41c16cf..c290149 100644
--- a/src/useInputs.tsx
+++ b/src/useInputs.tsx
@@ -6,7 +6,10 @@ type inputDefaultValue = string | number | ReadonlyArray<string> | undefined
 export const useInput = (props?: InputHTMLAttributes<HTMLInputElement>) => {
     const [value, setValue] = useState<inputDefaultValue>(props?.defaultValue)
     const input = useMemo(() => (
-        <input {...props} type={props?.type || "text"} onChange={(event) => setValue(event.target.value)}/>
+        <input {...props} type={props?.type || "text"} onChange={(event) => {
+            props?.onChange && props.onChange(event)
+            setValue(event.target.value)
+        }}/>
     ), [props])
     return [value, input]
 }
@@ -14,7 +17,10 @@ export const useInput = (props?: InputHTMLAttributes<HTMLInputElement>) => {
 export function useInputCheckbox(props?: InputHTMLAttributes<HTMLInputElement>) {
     const [value, setValue] = useState<boolean>(props?.defaultChecked || false)
     const input = useMemo(() => (
-        <input {...props} type={"checkbox"} onChange={(event) => setValue(event.target.checked)}/>
+        <input {...props} type={"checkbox"} onChange={(event) => {
+            props?.onChange && props.onChange(event)
+            setValue(event.target.checked)
+        }}/>
     ), [props])
     return [value, input]
 }