React component formatting numbers in an input field
Live demo
Live demo on CodeSandbox
Installation
yarn add react-amount
or
npm install react-amount
Usage
import React, { useState } from 'react';
import { Amount } from 'react-amount';
import '~/react-amount/dist/style/index.min.css';
interface MyComponentProps {
value: string | number | undefined;
}
const MyComponent = (props: MyComponentProps): React.Element => {
const { value } = props;
const [currentValue, setCurrentValue] = useState<string | number | undefined>(
value,
);
return (
<Amount
value={currentValue}
suffix="€"
onChange={(newValue) => setCurrentValue(newValue.raw)}
decimalSeparator=","
thousandSeparator=" "
/>
);
};
export default MyComponent;
Options
Option | Type | Default value | Description |
---|
value | string | number | undefined | Initial value of the control |
readOnly | boolean | false | Input value is not editable |
disabled | boolean | false | Input value is disabled |
textOnly | boolean | false | Input value is displayed as formatted text only value |
name | string | | Name of the input field |
className | string | undefined | Class to be added to the wrapper of the component |
onChange | (update: FormattedValues) => void | undefined | Callback function to handle value changes |
decimals | number | 2 | Number of decimals |
decimalSeparator | string | "." | Decimal separator |
thousandSeparator | string | "," | Thousand separator |
thousandGrouping | ThousandGroupingStyle: "thousand" | "wan" | "lakh" | "thousand" | Thousand grouping style |
displayOnInvalid | string | "-" | Value displayed on invalid input in textOnly |
dataTestId | string | undefined | Id value for testing |
required | boolean | false | Required of the input field |
prefix | string | undefined | Prefix |
suffix | string | undefined | Suffix |
Contributing
We very much welcome contributions.
Types
FormattedValues
export interface FormattedValues {
formatted: string;
float: number;
raw: string;
}
This structure is used in the onChange handler to provide flexibility on the format.
formatted
is for display purpose.float
is for numerical representation, but suffer from precision limitations.raw
is for numerical representation as a string with full precision.
ThousandGroupingStyle
export enum ThousandGroupingStyle {
THOUSAND = 'thousand',
WAN = 'wan',
LAKH = 'lakh',
}
THOUSAND
: groups of 3 digits
example: 123,456,789WAN
: 1 group of 4 digits, then groups of 3 digits
example: 12,345,6789LAKH
: 1 group of 3 digits, then groups of 2 digits
example: 12,34,56,789