Newer
Older
type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
onChange: (value: string) => void
}
value,
placeholder,
onChange,
...rest
}) => {
const [content, setContent] = React.useState<string>(value?.toString() || '')
const [width, setWidth] = React.useState(0)
const span = React.useRef<HTMLSpanElement>(null)
const isContentChangedRef = React.useRef(false)
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (!isContentChangedRef.current) isContentChangedRef.current = true
}
React.useEffect(() => {
const newContent = value?.toString()
if (newContent && newContent !== content) setContent(newContent)
}, [value])
React.useEffect(() => {
setWidth(span.current?.offsetWidth || 0)
if (isContentChangedRef.current) onChange(content)
<div className='inline-block relative'>
<span
className='opacity-0 absolute whitespace-nowrap pointer-events-none'
ref={span}
>
className='relative max-w-xs transition-colors bg-_bg-300 text-_crypto-400 outline-none border-b border-_border-400 hover:border-_border-500 focus:border-_border-500'