Formatted Number Input
A simple React component that allows breaking up a number type input in blocks.
It is specially useful for:
- Credit cards
- Product keys
- Phone numbers
- Special styling needs
- etc...
Usage
Install the package with:
npm install --save @gluedigital/formatted-number-input
Use it from your component like this:
import FormattedNumberInput from '@gluedigital/formatted-number-input'
// ...
<FormattedNumberInput groups={[4, 4, 4, 4]} />If you'd like to use the default style, you can import it from your main style:
@import "~@gluedigital/formatted-number-input/dist/style.css"All options
These are all the props you can use to customize the component:
| Prop | Type | Description |
|---|---|---|
| name | string | The field name for the input, when used on a form |
| groups | array(int) | A list with the length of each block composing the value |
| value | array(string) | The current value of the component (separated in blocks) |
| onChange | function | Called on each value change; it receives the current value as a param |
| onDone | function | Similar to onChange, but called when the component gets filled |
| placeholder | node | Placeholder to show while there is no input |
| separator | node / array(node) | Separator added between inputs |
Development
To develop new features on this project, just clone it and start it as usual:
npm start
A demo page will open with auto-reloading so you can see the results as you edit.