react-i18n-currency-input (inspired by react-currency-input)

An Typescript react component for currency using the ECMAScript Internationalization API based upon react-currency-input. The package also includes a corresponding hook (useI18nCurrencyInput) if you'd like to add the functionality to your own component.

Changes

v2.0.0

• useI18nCurrencyInput now will recognize when the value passed in via args is updated.
• react-use is no longer a peer dependency (usePrevious is embedded in the build becuase it's small)
• Strict mode on for Typescript

v2.0.0-pre3

• requireSign is no longer passed through to the Input element, as-is it shouldn't be

v2.0.0-pre1

• Move to React hook-based components
• Add React hook for advanced usage (useI18nCurrencyInput)
• Update dependencies
• Simplify build to use webpack
• Add storybook for development use

v1.0.0

Initial release

Installation

yarn install @houdiniproject/react-i18n-currency-input

Integration

I18nCurrencyInput

You can store the value passed in to the change handler in your state.

import * as React from 'react'
import I18nCurrencyInput from 'react-i18n-currency-input';

function MyApp(props: {value:number|string|null}) {
    const [value,setValue] = useState(props.value)

    const onChange = useCallback((maskedValue, value, valueInCents) => {
        // you'll want to pass maskedValue back into yoru I18nCurrencyInput.
        setValue(maskedValue)
    }, [setValue])
    render() {
        return (
            <I18nCurrencyInput value={value} onChange={this.handleChange}/>
        );
    }
}
export default MyApp

Locales and currencies

Default locale is US English with dollars as currency

    // $1,234,567.89
    <I18nCurrencyInput  />

A German locale and Euro as the currency

    // 1.234.567,89 € (the space is a non-breaking space, i.e. character code 160)
    <I18nCurrencyInput locale="de-de" currency="EUR" />

Locale and currency with different grouping options

    // ₹ 12,34,567.89 (the space is a non-breaking space, i.e. character code 160)
    <I18nCurrencyInput locale="en-IN" currency="INR" />

Currency without decimals prints just the integer portion

    // ￥123,456,789
    <I18nCurrencyInput locale="jp-jp" currency="JPY" />

Negatives

You can control whether the user can input negative or positive amounts.

For example, any negative symbols added to the following input will be stripped:

    <I18nCurrencyInput requireSign={'positive'} />

On the other hand, the following input will always be negative, no matter if the user attempts to remove the negative:

    <I18nCurrencyInput forceSign={'negative'} />

All other attributes are applied to the input element. For example, you could add a class to the input control

    <I18nCurrencyInput className="form-control" />

Options

Option | Default Value | Description ----------------- | ------------- | ----------------------------------------------------------------------------- value | 0 | The initial value locale | "en-us" | locales to use for formatting currency | "USD" | The ISO 4217 currency code for this field currencyDisplay | "symbol" | How you want the currency code to be displayed. See currencyDisplay onChange | n/a | Callback function to handle value changes. Arguments are (maskedValue, value, valueInCents). Corresponds to the value that the user sees ($1,000.00), the value as a number (1000) and the number in the lowest monetary unit (1000000) useGrouping | true | whether to include the integer grouping symbols. For example, in the US, a comma is added every three digits: "1000" is turned into "1,000" requireSign | undefined | 'positive' to turn all non-zero numbers to be positive, 'negative' to make them negative selectAllOnFocus | false | Selects all text on focus or does not inputRef | undefined | a reference created using useRef to access the input element wrapped by I18nCurrencyInput.

Additionally, I18nCurrencyInput will pass any non-recognized properties down to the input element

useI18nCurrencyInput hook

This project includes a hook for reusing most of the functionality of I18nCurrencyInput in your own components. I18nCurrencyInput uses the hook internally and is a good example of its use.

To use useI18nCurrencyInput you would import as follows:

import {useI18nCurrencyInput} from 'react-i18n-currency-input`

The properties to useI18nCurrencyInput are similar to the properties in I18nCurrencyInput. The major differences are:

• callbacks, like onChange, onFocus, etc., are ignored. You'll receive your onChange callbacks as the output from the hook.
• you MUST pass an ref to inputRef. It's current value can be undefined or null but the ref has to be passed.

The output of useI18nCurrencyInput are as follows:

Property | Type | Description ----------------- | ------------- | ----------------------------------------------------------------------------- maskedValue | string | the value that the user sees after formatting, i.e. $1,234.56 - NOTE: Pass this as the value of your input element value | number | the value formatted as a number, i.e. 1234.56 valueInCents | number | the value in the small monetary unit of the currency, i.e. 123456 for $1,234.56 onChange | Function | the change handler to attach to your input element onFocus | Function | the focus handler to attach to your input element onMouseUp | Function | the mouse up handler to attach to your input element onSelect | Function | the select handler to attach to your input element

Questions

Why did you fork react-currency-input?

react-currency-input is a really great library and most of the code in react-i18n-currency-input is a fairly direct copy from react-currency-input. react-i18n-currency-input would not exist without react-currency-input.

That said, I had one major issue when using react-currency-input: it doesn't use the ECMAScript Internationalization API. The future of the Houdini Project demands we that have a consistent, reliable way to do internationalization of currency amounts. The best way to do so it to use the ECMAScript Internationalization and "outsource" internationalization to a reliable source.

Given this along with the more minor issues of react-currency-input being seemingly unmaintained and not having a Typescript API, it seems like it makes sense to go in a different direction.