feat: 🎸 custom hook for using input

Author: Pratham82

2024 Prep/machine_coding/react/src/App.tsx

@@ -1,11 +1,11 @@
 import './App.css'
-import { LiftingUpState } from './components'
+import { InputHookComp } from './components'
 
 function App() {
   return (
     <div className="container">
       <h1>Vite + React</h1>
-      <LiftingUpState />
+      <InputHookComp />
     </div>
   )
 }

2024 Prep/machine_coding/react/src/components/InputCustomHookComp.tsx

@@ -0,0 +1,22 @@
+import { useInput } from '../hooks'
+
+function InputHookComp() {
+  const input = useInput({
+    initialValue: '',
+  })
+
+  return (
+    <>
+      <input
+        type="text"
+        value={input.value}
+        onChange={input.handleChange}
+        placeholder="Enter your name here"
+      />
+      <h4>value: {input.value}</h4>
+      <button onClick={input.reset}>Reset</button>
+    </>
+  )
+}
+
+export default InputHookComp

2024 Prep/machine_coding/react/src/components/index.ts

@@ -4,6 +4,7 @@ import FileExplorer from './FileExplorer'
 import BatchingStates from './BatchingStates'
 import CountDownTimer from './Timer'
 import LiftingUpState from './LiftingStateUp'
+import InputHookComp from './InputCustomHookComp'
 
 export {
   Loader,
@@ -12,4 +13,5 @@ export {
   BatchingStates,
   CountDownTimer,
   LiftingUpState,
+  InputHookComp,
 }

2024 Prep/machine_coding/react/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useFetch } from './useFetchAsync'
 export { useDebounce } from './useDebounce'
+export { useInput } from './useInput'

2024 Prep/machine_coding/react/src/hooks/useInput.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+
+export interface IUseInputProps {
+  initialValue: string | undefined
+}
+const useInput = (props: IUseInputProps) => {
+  const { initialValue = '' } = props
+
+  const [value, setValue] = useState<string>(initialValue)
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const reset = () => {
+    setValue(initialValue)
+  }
+  return { value, handleChange, reset }
+}
+
+export { useInput }