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