React Autowidth Input

Highly configurable & extensible automatically sized input field.

Features

• Works out of the box with zero config
• Supports usage as a controlled or uncontrolled input
• Supports custom refs
• Miniscule bundle size

Install

npm i react-autowidth-input

Quick Start

import AutowidthInput from "react-autowidth-input";

<AutowidthInput
    value={inputValue}
    onChange={(event) => {
        // event.target.value contains the new value
    }}
/>;

Additional Props

The component supports the following props in extension to the regular html input props.

extraWidth

extraWidth={number}

Default: 16

The amount of additional space rendered after the input.

import React from "react";
import AutowidthInput from "react-autowidth-input";

const MyComponent = () => {
    return <AutowidthInput extraWidth={16} />;
};

...

wrapperClassName

wrapperClassName={string}

Class provided to the wrapper element encapsulating the input.

import React from "react";
import AutowidthInput from "react-autowidth-input";

const MyComponent = () => {
    return <AutowidthInput wrapperClassName="my-class" />;
};

...

wrapperStyle

wrapperStyle={{}}

Inline styles provided to the wrapper element encapsulating the input.

import React from "react";
import AutowidthInput from "react-autowidth-input";

const myStyles = {
    padding: "1rem"
}

const MyComponent = () => {
    return <AutowidthInput wrapperStyle={myStyles}/>
};

...

onAutoSize

onAutoSize={(newWidth) => {}}

Callback function to be fired on input resize. newWidth does not include width specified by extraWidth (see above for extraWidth prop)

import React, {useState} from "react";
import AutowidthInput from "react-autowidth-input";

const MyComponent = () => {
    const [width, setWidth] = useState(0);

    const myFunction = (newWidth) => {
        setWidth(newWidth);
    }

    return <AutowidthInput onAutosize={myFunction}/>
};

...

placeholderIsMinWidth

placeholderIsMinWidth={boolean}

If set to true, the input will never resize to be smaller than the width of the placeholder.

import React from "react";
import AutowidthInput from "react-autowidth-input";

const MyComponent = () => {
    return <AutowidthInput placeholderIsMinWidth={true}/>
};

...

minWidth

minWidth={number}

If set, specifies the minimum width of input element. Width specified by extraWidth is applied anyway, so actual minimum width is actually extraWidth + minWidth (see above for extraWidth prop)

import React from "react";
import AutowidthInput from "react-autowidth-input";

const MyComponent = () => {
    return <AutowidthInput minWidth={15}/>
};

...

Notes

This component was inspired by Jed Watson's react-input-autosize, but rebuilt with modern react APIs.

Contributors

• kierien
• burtek