import s from './Input.module.css' ; import React , { RefObject , useEffect , useRef } from 'react' ; type InputProps = { placeholder : string ; onFocus ? : ( ) => void ; onBlur ? : ( ) => void ; onChange : ( v : string ) => void ; onInputRef : ( ref : RefObject < HTMLInputElement > ) => void ; value : string ; focusOnMount ? : boolean ; } ; const Input = ( { value , placeholder , onChange , onFocus , onBlur , onInputRef , focusOnMount } ) => { const inputRef = useRef < HTMLInputElement > ( null ) ; useEffect ( ( ) => { if ( focusOnMount ) { inputRef ?. current ?. focus ( ) ; } } , [ focusOnMount ] ) ; useEffect ( ( ) => { onInputRef ( inputRef ) ; } , [ onInputRef , inputRef ] ) ; return ( < div className = { s . input } > < input ref = { inputRef } className = { `${ s . inputInput }` } type = "text" value = { value } onChange = { ( event ) => onChange ( event . target . value ) } onFocus = { onFocus || ( ( ) => { } ) } onBlur = { onBlur || ( ( ) => { } ) } placeholder = { placeholder } spellCheck = { false } / > < /div>); } ; export default Input ;