Currency Field

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.

let [value, setValue] = useState('');
return (
  <Stack gap="small">
    <span>{JSON.stringify(value)}</span>
    <span>{typeof value}</span>
    <CurrencyInput value={value} onChange={setValue} />
  </Stack>
);

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.

let [value, setValue] = useState(1234.123456789);
return (
  <CurrencyInput maximumFractionDigits={4} value={value} onChange={setValue} />
);

showAdornment

You may choose to hide the dollar symbol adornment.

let [value, setValue] = useState(100);
return (
  <CurrencyInput showAdornment={false} onChange={setValue} value={value} />
);

CurrencyField

If you're using the CurrencyInput inside a form, you should use the CurrencyField component. This accepts similar props to other Field components.

let [value, setValue] = useState('');
return <CurrencyField label="Amount" value={value} onChange={setValue} />;

Usage with @reckon-web/forms

To use it with @reckon-web/forms, you can use field.currency and validate.currency.

let form = useForm(
  field.currency({
    validate: validate((value) => {
      validate.currency(value);
      return value;
    }),
  })
);
return <CurrencyField label="Amount" {...form.props} />;