@rschpdr/react-money-input NPM

React Money Input

npm (scoped)

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

npm.io

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;