@kensoni/react-input-number
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

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 prop integer.

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

Live demo

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.

Package Sidebar

Install

npm i @kensoni/react-input-number

Weekly Downloads

1

Version

0.0.6

License

MIT

Unpacked Size

21 kB

Total Files

10

Last publish

Collaborators

  • kensoni