react fixed float input
Format the content of a <input/> element as a float with fixed precision. Additional digits will be rounded on initialization and on the blur event.
Installation
npm install --save react-fixed-float-input
or
yarn add react-fixed-float-input
Usage
import { useState } from 'react';
import FixedFloatInput from 'react-fixed-float-input';
function Formular() {
const [value, setValue] = useState(0);
const onChangeValue = value => setValue(value);
return <FixedFloatInput value={value} onChangeValue={onChangeValue}/>;
}- initialize value by
useState(0)results in displaying the formatted value<input>0.00</input> - editing the field manually to
<input>9.98542</input>invokessetValue(9.98542)inside the onChangeValue callback - leaving the
<input/>field (onblur) invokes againsetValue(9.99)and displaying<input>9.99</input>for the formated value
Props
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Custom CSS class | |
| formatter | func(value: number): string |
Custom formatter callback overwrites the default formatter | |
| onChangeValue | func(value: number) |
Handle the changed value by a callback | |
| precision | number | 2 | The precision of the formatted value, e.g. 2 => 12.00. Works only for the default formatter. |
| roundType | round | ceil | floor | round | Round additional digits by Math.round, ... Works only for the default formatter |
| value | number | string | the formatted value |
- Inspect the code for the default formatter
- HTML 5 input attributes, see https://developer.mozilla.org/de/docs/Web/HTML/Element/Input#attribute.
Custom formatter
(number) => isNaN(parseFloat(value))?'':parseFloat(number).toLocaleString('en', {minimumFractionDigits:0, maximumFractionDigits:2});Note: the returned string should be a vaild float in spite of HTML 5 e.g. -123.3456
Comments
Sure, JS and Typescript know only numbers, no floats.
Personally I don't like to get stuck while typing on the keyboard. So this compoment allows free typing of digits.
Try to use the global lang attribute to influence the representation in Firefox. Chrome actually uses always its own borwser settings