react-auto-size-input

Adjust the width according to the text, and can reach a certain length to reduce the font size.

Install

yarn add @moeui/react-auto-size-input // or npm i @moeui/react-auto-size-input -S

Use

import Input from '@moeui/react-auto-size-input'

 <Input value={value} onChange={val => setValue(val)} />

Props

| Name | Description | Type | Default | | -------------- | --------------------------------------------------- | ------------------------------------ | ---------- | | value | input value | string | '0' | | onChange | Triggered when the input content is changed | (value: string) => void | - | | onKeyDown | Triggered when the input content is onKeyDowned | (e: KeyboardEvent) => void | - | | className | Input class name | string | - | | prefix | The prefix icon for the Input | () => React.ReactElement \| string | - | | suffix | The suffix dom for the Input | () => React.ReactElement \| string | - | | maxLength | The maximum number of characters the user can enter | number | 20 | | shrink | Text shrinks the length limit | number | 12 | | shrinkFontSize | Text shrinks font size | number | 26 | | fontSize | Text font size | number | 36 | | defaultValue | input value is empty displayed value | string | '0' |

Ref

| Name | Description | Type | | ------------- | ---------------------------- | ---------------------------- | | blur | Let the input box lose focus | () => void | | clear | Clear the input content | () => void | | focus | Let the input box get focus | () => void |

CSS Variables

| Name | Description | Default | | ------------------- | ----------------------- | ------------------------ | | --color | Text color. | #000 | | --background | The input background | #fff |