react-amount

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.

• Submit GitHub issues to report bugs or ask questions.
• Propose Pull Request to improve our code.

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,789
• WAN: 1 group of 4 digits, then groups of 3 digits example: 12,345,6789
• LAKH: 1 group of 3 digits, then groups of 2 digits example: 12,34,56,789