react-autosized-input v1.0.0

React Autosized Input

Highly configurable & extensible automatically sized input field built with hooks.

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 install react-autosized-input

Quick Start

import AutosizedInput from "react-autosized-input";

<AutosizedInput
    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 AutosizedInput from "react-autosized-input";

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

...

wrapperClassName

wrapperClassName={string}

Class provided to the wrapper element encapsulating the input.

import React from "react";
import AutosizedInput from "react-autosized-input";

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

...

wrapperStyle

wrapperStyle={{}}

Inline styles provided to the wrapper element encapsulating the input.

import React from "react";
import AutosizedInput from "react-autosized-input";

const myStyles = {
    padding: "1rem"
}

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

...

onAutoSize

onAutoSize={(newWidth) => {}}

Callback function to be fired on input resize.

import React, {useState} from "react";
import AutosizedInput from "react-autosized-input";

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

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

    return <AutosizedInput 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 AutosizedInput from "react-autosized-input";

const MyComponent = () => {
    return <AutosizedInput placeHolderIsMinWidth={true}/>
};

...

Notes

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

Contributers

• kierien