A currency input for React
npm install react-currency-masked-input

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.
Install via npm: npm install react-currency-masked-input.
It accepts all properties you'd normally set on an input, so:
``jsx
// your standard input
render() {
return
}
`
Becomes a matter of simply replacing the tag to CurrencyInput:
`jsx
// with a currency mask
import CurrencyInput from 'react-currency-masked-input'
//...
render() {
return
}
`
| 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.defaultValue
- Will use the prop passed in as an initial value, but will take over from there.props.value
- Will become a controlled input if/when is passed to it.onChange
- Calls prop after updating its internal value. First argument is the original event, the second is the masked value.myComponent.refs.input.value
- Sets the input value on the component instance, so you can reference it on a ref, e.g., , as you would with a normal ref.
1. yarn - install local dependencies
2. npm run bundle - compiles source code to ./react-currency-masked-input.js
1. npm test - Runs the unit tests in watch mode
2. npm run test:ci` - Runs the tests once; useful in CI.