🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

CurrencyMaskedInput Creates an input that gets masked as currency in your React applications.

Form React

Documentation

Currency Input

Greenkeeper badge

Build Status

<CurrencyInput /> Creates an input that gets masked as currency, in React.

Shows currency masked on the input

Note: Dollar sign and styling not included

i.e.,

Entering a 1 shows: $0.01.

Entering 11 shows: $0.11.

Entering 110 shows: $1.10.

And so on.

Usage

Install via npm: npm install react-currency-masked-input.

It accepts all properties you'd normally set on an input, so:

// your standard input  render() {   return <input name="myInput" placeholder="0" required /> }

Becomes a matter of simply replacing the tag to CurrencyInput:

// with a currency mask import CurrencyInput from 'react-currency-masked-input'  //...  render() {   return <CurrencyInput name="myInput" required /> }

Props

Prop Description Values Default
separator The character use as a decimal point ., , .

Usage notes:

  • renders an input with type="number" and pattern="\d*", but will override those props if you pass them in.
  • Will use the defaultValue prop passed in as an initial value, but will take over from there.
  • Will become a controlled input if/when props.value is passed to it.
  • Calls onChange prop after updating its internal value. First argument is the original event, the second is the masked value.
  • Sets the input value on the component instance, so you can reference it on a ref, e.g., myComponent.refs.input.value, as you would with a normal ref.

Development

  1. yarn - install local dependencies

  2. npm run bundle - compiles source code to ./react-currency-masked-input.js

Testing

  1. npm test - Runs the unit tests in watch mode

  2. npm run test:ci - Runs the tests once; useful in CI.


You May Also Like