@kensoni/react-input-number
v0.0.6
Published
Handle input number with React. Support Material UI (MUI)
Downloads
53
Maintainers
Readme
React Input Number
Handle Input number with React. Support Material UI (MUI)
Changelog
0.0.6
- Allow press
tab
key.
0.0.5
- Fix enter double separator between integer and decimal part.
0.0.4
- Add
?
for propinteger
.
0.0.3
- Support flag
integer
only enter integer to input
0.0.2
- Support
ref
is a function.
Installation
# npm
npm i @kensoni/react-input-number
# Yarn
yarn add @kensoni/react-input-number
Playground with storybook
git clone https://github.com/ngvcanh/react-input-number
cd react-input-number
yarn install
yarn start
API
Using all props
of HTMLInputElement
without prop type
. In addition, there are some additional props:
| Prop name | Type | Description |
|---|---|---|
| comma | boolean | Format number with using ,
separate integer and decimal part. Only working when prop format
is true
|
| disableNegative | boolean | Negative numbers are not allowed in input |
| format | boolean | Enable format value for input |
| formatOnlyBlur | boolean | Only format input number when focus out input |
| integer | boolean | Only enter integer for input |
| renderInput | Function | Using for render another input if using third party library |
| value | string, number | Default value for input number. Accept normal number, format number, format comma number |
Render Input Function With Material UI (MUI)
import { ChangeEvent, useState } from 'react';
import InputNumber from '@kensoni/react-input-number';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
export default function App(){
const [ value, setValue ] = useState('');
const onChange = (event: ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value);
}
return <Box>
<InputNumber
format
value={ value }
onChange={ onChange }
renderInput={(inputProps, inputRef) => (
<TextField fullWidth inputProps={ inputProps } inputRef={ inputRef } />
)}
/>
<Box component="pre" sx={{ mt: 3 }}>{ value }</Box>
</Box>
}
Make sure that the properties from the function's inputProps are attached to the TextField's inputProps. Do not override this props on TextField props.
Each time the onChange event emit, the cursor will jump to the end of the input. In case of preserving the cursor position, make sure that the function's inputRef must be attached to the TextField's inputRef to hold the pointer.