@rschpdr/react-money-input
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

Go give them stars!

Package Sidebar

Install

npm i @rschpdr/react-money-input

Weekly Downloads

439

Version

1.0.0

License

MIT

Unpacked Size

27.8 kB

Total Files

12

Last publish

Collaborators

  • rschpdr