Skip to content

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

Notifications You must be signed in to change notification settings

kierianlee/react-autowidth-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d51d4cd · Dec 28, 2023

History

28 Commits
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Jan 21, 2023
Nov 11, 2022
Dec 28, 2023
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022
Nov 11, 2022

Repository files navigation

React Autowidth Input

Highly configurable & extensible automatically sized input field.

npm version

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