Usage

The CurrencyInput is similar to the TextInput with a couple of small differences. The type of the value is string | number so it can be a string or a number. We represent a valid value as a number and everything else as a string. This makes it easy to pass the value to other systems that accept a float but means that we can still represent invalid values as strings so that validation errors can be shown when the value can't be represented as a number. We'll also format the value of the input using Intl.NumberFormat when the input is blurred.

It shares disabled, read only and validation states with TextInput.

maximumFractionDigits

You can customise the maximum number of digits after the decimal place between 2(the default) and 4. The naming is based on the option that Intl.NumberFormat accepts.

showAdornment

You may choose to hide the dollar symbol adornment.

align

Sets the alignment of the value to left or right

Usage with @balance-web/forms

To use it with @balance-web/forms, you can combine validators to achieve the desired outcome.

CurrencyInputCalculator

This component works the same as CurrencyInput above except:

• It has an in-built calculator so you can type in math expressions like 2 * (3 + 3)
• Because of the calculator, this component only emits changes onBlur or if the user presses enter.

Usage

Emitting values

This component will always emit a string to the onChange handler provided because this component does not make any assumptions around validation and will emit invalid expressions. It's up to the consumer to validate and handle all cases.

For example:

• If the user enters the number 8, it will emit 8 as a string.
• If the user enters a valid expression like 2 * (3 + 3), it will emit 12 as a string.
• If the user enters an invalid expression or number like 2 + )) 3, it will emit the whole expression or number as a string.

Depending on your UI, you should think about when the show errors to the user. Either on submission or onChange. You will also have to think about anything that treats the output of the calculator field as a number since it's not guaranteed to emit a number. Your calculations might result in NaN which also need to be handled gracefully both in the calculation and the resulting UI.

evaluateExpression is the safe expression evaluator that powers CurrencyInputCalculator — reach for it directly if you want to evaluate a math expression somewhere else. It never throws; check success instead.

AGGridCurrencyInput

A currency cell editor for AG Grid, for grids that need the same masking/formatting behaviour as CurrencyInput in a cell. Unlike CurrencyInput, changes are only committed to AG Grid's value when the user presses Enter/Tab or clicks away — Escape or any other blur reverts the cell to its original value.

import { AGGridCurrencyInput } from '@balance-web/currency-input';

const currencyCellEditor = (agGridProps) => (
  <AGGridCurrencyInput agGridProps={agGridProps} ariaLabel="Amount" />
);

Getting a value programmatically

CurrencyInput accepts a ref typed as CurrencyInputRef — the underlying HTMLInputElement plus an optional setValueImperatively(value: number), for the rare case you need to set the input's value without it coming through the controlled value prop.