Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/kierien/react-autowidth-input below:

kierianlee/react-autowidth-input: Highly configurable & extensible automatically sized input field built with hooks.

Highly configurable & extensible automatically sized input field.

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

npm i react-autowidth-input

import AutowidthInput from "react-autowidth-input";

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

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

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={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={{}}

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={(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={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={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}/>
};

...

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

• kierien
• burtek

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4