React Currency

Provides components to display and input currency data in the correct format for the specified locale.

These components use the provided currency to ensure the following:

• The correct currency symbol is used
• Minor currency units are displayed (if applicable to the currency) with the correct number of figures.

The user's locale settings from their browser are used for the following:

• Positioning of the currency symbol (start or end of the number)
• Decimal separator (dot or comma)
• Thousands separator (comma, dot or space)

Example Usage

Currency Formatter

import { CurrencyFormatter } from "@binderpos/react-currency";

<CurrencyFormatter currency="EUR">123.45</CurrencyFormatter>

Currency Input

The currency input can be used as either a controlled or uncontrolled component. Any additional props (such as className) are passed to the input component.

import { CurrencyInput } from "@binderpos/react-currency";

Uncontrolled

const inputRef = useRef();
<CurrencyInput currency="CAD" defaultValue={99.99} ref={inputRef}/>

Controlled

const [ val, setVal ] = useState(100.53);
<CurrencyInput currency="CAD" value={val} onChange={setVal} />

Imports

The Formatter and Input components can also be imported independently using the following syntax:

import CurrencyFormatter from "@binderpos/react-currency/build/CurrencyFormatter"

import CurrencyInput from "@binderpos/react-currency/build/CurrencyInput"

Props

| Prop | Description | Required | Example | |------|-------------|----------|---------| | currency | Three letter currency code (string) | Yes | CAD | | localeOverride | Override of the user's locale | No | en-NZ |

Development

This project includes react as a peer dependency, so does not have its own version of react in the project.

The easiest way to develop this component is to create a new project with create-react-app and then use npm link (or yarn link).

npx create-react-app dev-currency-input
cd currency-input
npm link
cd ../dev-currency-project
npm link @binderpos/react-currency

The instance of react needs to be [the same for both projects][1] otherwise errors regarding the rules of hooks will stop the code from running in development.

To work around this, react and react dom in the dev project need to be linked back to the currency-input project

cd dev-currency-project/node_modules/react
yarn link
cd ../react-dom
yarn link
cd ../../../dev-currency-project
yarn link react
yarn link react-dom

You can then run the project with

npm start # or yarn start