andrewkrippner/react-use-responsive-input

useResponsiveInput is a React hook that makes any input component responsive to it's text's width.

useResponsiveInput

useResponsiveInput is a React hook that makes any input component responsive to it's text's width.

Installation

npm

npm install react-use-responsive-input

Yarn

yarn add react-use-responsive-input

Example

import useResponsiveInput from 'react-use-responsive-input'

const ResponsiveInput = ({
    value,
    onChange,
}: {
    value: string
    onChange?(value: string): void
}) => {
    const responsiveInputRef = useResponsiveInput({
        // options
        // disabled: boolean
        // extraWidth: number
        // fixedValue: string
        // minWidth: number
        // onUpdateWidth(width: number): void
    })

    return (
        <input
            ref={responsiveInputRef}
            value={value}
            onChange={(e) => onChange?.(e.target.value)}
        />
    )
}