react-use-responsive-input
TypeScript icon, indicating that this package has built-in type declarations

2.0.11 • Public • Published

useResponsiveInput

npm (tag) npm bundle size NPM

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)}
        />
    )
}

Readme

Keywords

none

Package Sidebar

Install

npm i react-use-responsive-input

Weekly Downloads

87

Version

2.0.11

License

MIT

Unpacked Size

5.87 kB

Total Files

7

Last publish

Collaborators

  • andrewkrippner