2.5.0 • Published 5 years ago

react-currency-masked-input v2.5.0

Weekly downloads
2,393
License
MIT
Repository
-
Last release
5 years ago

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

PropDescriptionValuesDefault
separatorThe 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.

2.5.0

5 years ago

2.4.0

6 years ago

2.3.1

6 years ago

2.3.0

6 years ago

2.2.0

8 years ago

2.1.0

8 years ago

2.0.2

8 years ago

2.0.1

9 years ago

2.0.0

9 years ago

1.0.2

9 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.0.14

10 years ago

0.0.13

10 years ago

0.0.12

10 years ago

0.0.11

10 years ago

0.0.10

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago