Licence
MIT
Version
0.0.10
Deps
3
Size
60 kB
Vulns
0
Weekly
0
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 -SUse
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 |