I am working on creating an input field with a rounded bottom line. My goal is to make the main div expand or contract based on the length of the input, with specified minimum and maximum lengths.
https://i.sstatic.net/REqld.png
Instead of taking up the entire width, I just want the bottom bar and surrounding div to adjust in size within a range, such as a minimum of 100px and a maximum of 300px
Input code:
import React, { memo, useState } from 'react'
import { CommonInputProps } from '../Input'
import { twMerge } from 'tailwind-merge'
export interface NoStyleProps
extends Omit<CommonInputProps, 'form' | 'placeholder'> {
mainDivClass?: string
}
const NoStyle = ({
register,
className,
hasError,
mainDivClass,
}: NoStyleProps) => {
const [isFocused, setIsFocused] = useState(false)
const handleFocus = () => {
setIsFocused(true)
}
const handleBlur = () => {
setIsFocused(false)
}
return (
<div className={twMerge('relative w-auto', mainDivClass)}>
<input
type="text"
className={twMerge(
`outline-none bg-white text-center `,
className,
)}
autoComplete="off"
{...register}
onFocus={handleFocus}
onBlur={handleBlur}
/>
{hasError && (
<div className="absolute bottom-0 left-0 right-0 h-1 bg-error rounded-full"></div>
)}
{isFocused && !hasError && (
<div className="absolute bottom-0 left-0 right-0 h-1 bg-primary rounded-full"></div>
)}
</div>
)
}
export default memo(NoStyle)