Currency Field

The CurrencyField component has been deprecated and will be removed in a future version. Use Field and CurrencyInput instead.

- <CurrencyField
-   label="Field label"
-   onChange={handleInputChange}
-   value={inputValue}
- />
+ <Field label="Field label">
+   <CurrencyInput
+     onChange={handleInputChange}
+     value={inputValue}
+   />
+ </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">
    <CurrencyField label="Example" value={value} onChange={setValue} />
    <Text>{JSON.stringify(value)}</Text>
    <Text>{typeof value}</Text>
  </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 (
  <CurrencyField
    label="Fraction digits"
    maximumFractionDigits={4}
    value={value}
    onChange={setValue}
  />
);

showAdornment

You may choose to hide the dollar symbol adornment.

let [value, setValue] = useState(100);
return (
  <CurrencyField
    label="Without adornment"
    showAdornment={false}
    onChange={setValue}
    value={value}
  />
);

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} />;