react-g-input-mask

An input mask for template or currency

Installation:

yarn add react-g-input-mask

or

npm install --save react-g-input-mask

Live demo:

http://gri.fo/react-g-input-mask/storybook-static

How to:

Currency mask

This is a currency mask for input fields. The currency is masked using the Intl.NumberFormat in the backstage.

import { CurrencyMask } from 'react-g-input-mask'

const MyComponent = () => (
  <CurrencyMask
    options={{
      locale: 'en-us',
      currency: 'USD'
    }}
    inputProps={{
      className: 'my-css-class'
    }}
  />
)

Props:

| Option | Default | Description | | - | - | - | | options.locale (required) | - | The locale to format. For the general form and interpretation of the locales argument, see the Intl page | | options.currency (required) | - | The currency to format. Check the current currency & funds code list | | defaultValue | "" | The input default value | | inputProps | {} | If you want to send props to input, you should pass in this object | | as | "input" | If you want to render another element/component instead the input, you can use the as prop |

You can have problems with numbers bigger than Number.MAX_SAFE_INTEGER (you can check this constant logging it in your browser dev tools)

Custom mask

import { CustomMask } from 'react-g-input-mask'

const MyComponent = () => (
  <CustomMask
    mask="99/99/9999"
    inputProps={{
      className: 'my-css-class'
    }}
  />
)

Props:

| Option | Default | Description | | - | - | - | | mask (required) | - | The custom mask (See below) | | placeholderChar | "_"| If you want to use a custom placeholder, pass the char in this prop | | defaultValue | "" | The input default value | | inputProps | {} | If you want to send props to input, you should pass in this object | | as | "input" | If you want to render another element/component instead the input, you can use the as prop |

To create your mask, you should compose a string with the static chars and the custom validation chars (eg: "999-99/A"):

| Mask | Description | | - | - | | 9 | Represents the numbers: /\d/ | | A | Represents the alphabetic characters /[A-Za-z]/ | | * | Any char /./ |