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.