wilkhp29 / react-money-input

A currency text input for React that Just Works™

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!