react-currency-masked-input v2.5.0
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.
5 years ago
6 years ago
6 years ago
6 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago