React Money Input

A currency text input for React that Just Works™

• "ATM style" typing, matches user expectations of how a money input should work
• Uses Intl API to display locale accurate currency representations
• Supports custom inputs (e.g. Material UI text fields)
• Returns currency.js enforced numeric float values
• Works out of the box with libs like Formik

Installation

npm install --save @rschpdr/react-money-input currency.js

Quick Start

import React, { useState } from "react";
import MoneyInput from "@rschpdr/react-money-input";

function Example(props) {
  const [amount, setAmount] = useState(0);

  function handleChange(e) {
    setAmount(e.target.value);
  }

  return <MoneyInput onChange={handleChange} value={amount} />;
}

export default Example;

Props

| Props | Options | Default | Description | | -------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | className | string | '' | Regular React classname | | style | Styles object | {} | Regular React styles object | | currencyConfig | Currency configuration object | locale: string = "en-US" currencyCode: string = "USD" currencyDisplay: string = "symbol" useGrouping: boolean = true minimumFractionDigits: number = undefined | Config options for Number.toLocaleString method. See more | | customInput | Component Reference | undefined | Support for custom inputs e.g. Material UI TextField | | name | string | undefined | Regular name HTML property | | id | string | undefined | Regular id HTML property | | max | number | Number.MAX_SAFE_INTEGER | Maximum allowed value | | onChange | (event) => any | undefined | onChange event handler. event is a fake Synthetic Event with only value, name and id properties defined inside target | | value | number | undefined | Input value |

Custom Inputs

Simply pass the custom input component as a prop. Pass the custom input props directly to MoneyInput:

import React, { useState } from "react";
import { TextField } from "@material-ui/core";
import MoneyInput from "@rschpdr/react-money-input";

function Example(props) {
  const [amount, setAmount] = useState(0);

  function handleChange(e) {
    setAmount(e.target.value);
  }

  return (
    <MoneyInput
      customInput={TextField}
      variant="outlined"
      label="Custom Input!"
      onChange={handleChange}
      value={amount}
    />
  );
}

export default Example;

Contributing

All contributions welcome! Feel free to raise issues or submit a PR.

License

This project is licensed under the MIT License - see LICENSE.md for details.

Acknowledgments

• Based on larkintuckerllc/react-currency-input
• Custom input support based on s-yadav/react-number-format

Go give them stars!