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

    0.1.3 • 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 "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 "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!

    Install

    npm i @rschpdr/react-money-input

    DownloadsWeekly Downloads

    463

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    31.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • rschpdr