rmi
@rschpdr/react-money-input
npm i @rschpdr/react-money-input
rmi

@rschpdr/react-money-input

A currency text input for React that Just Works™

by Pedro Resch

0.1.3 (see all)License:MITTypeScript:Not Found
npm i @rschpdr/react-money-input
Readme

React Money Input

npm (scoped) Node.js CI

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 "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

PropsOptionsDefaultDescription
classNamestring''Regular React classname
styleStyles object{}Regular React styles object
currencyConfigCurrency 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
customInputComponent ReferenceundefinedSupport for custom inputs e.g. Material UI TextField
namestringundefinedRegular name HTML property
idstringundefinedRegular id HTML property
maxnumberNumber.MAX_SAFE_INTEGERMaximum allowed value
onChange(event) => anyundefinedonChange event handler. event is a fake Synthetic Event with only value, name and id properties defined inside target
valuenumberundefinedInput 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 "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

Go give them stars!

Downloads/wk

256

GitHub Stars

11

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

17
VersionTagPublished
0.1.3
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial