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.
+
+You can do that by adding your onChange from object. Note that you will get the value as always.
+
+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 | undefined
export const useInput = (props?: InputHTMLAttributes) => {
const [value, setValue] = useState(props?.defaultValue)
const input = useMemo(() => (
- setValue(event.target.value)}/>
+ {
+ props?.onChange && props.onChange(event)
+ setValue(event.target.value)
+ }}/>
), [props])
return [value, input]
}
@@ -14,7 +17,10 @@ export const useInput = (props?: InputHTMLAttributes) => {
export function useInputCheckbox(props?: InputHTMLAttributes) {
const [value, setValue] = useState(props?.defaultChecked || false)
const input = useMemo(() => (
- setValue(event.target.checked)}/>
+ {
+ props?.onChange && props.onChange(event)
+ setValue(event.target.checked)
+ }}/>
), [props])
return [value, input]
}