react-currency-masked-input
v2.5.0
Published
A currency input for React
Downloads
8,007
Maintainers
Readme
Currency Input
<CurrencyInput />
Creates an input that gets masked as currency, in React.
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"
andpattern="\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
yarn
- install local dependenciesnpm run bundle
- compiles source code to ./react-currency-masked-input.js
Testing
npm test
- Runs the unit tests in watch modenpm run test:ci
- Runs the tests once; useful in CI.