final-form / final-form/react-final-form

Add support for currency input

Open
#647 0 comments 3 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.4k
Forks
497
PR merge metrics
No merged PRs in 30d

Description

### Are you submitting a **bug report** or a **feature request**?

Feature request

Add support for currency input based on Intl.NumberFormat. This can be added to [format](https://final-form.org/docs/react-final-form/types/FieldProps#format) feature.

### What is the current behavior?

I have the following function for `format`:

```
const toCurrency = value => {
if (!value) return value;
const formatter = new Intl.NumberFormat("en-US", {
style: "decimal",
minimumFractionDigits: 2,
currency: "USD"
});
return formatter.format(value);
};
```

And then I use it like `format={value => toCurrency(value)}`.

But it doesn't let my type a number more than 5 digits. Also it types the numbers only in fractions.

### What is the expected behavior?

I would like the numbers to go from right to left from fractions to the interger (so that if you need an interger, you just type `00` at the end). Or may be first edit an interger and then press right arrow to edit fractions.

### Sandbox Link

https://codesandbox.io/s/react-final-form-simple-example-fz1pb?fontsize=14

### What's your environment?

🏁 React Final Form version 6.3.0
🏁 Final Form version 4.18.5

### Other information

Something similar as described in here https://codeburst.io/currency-input-for-react-de1c1f1a5877, but built in `react-final-form`.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.