React-g-input-mask NPM

react-g-input-mask

An input mask for template or currency

Installation:

yarn add react-g-input-mask

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 `/./`

react input mask formatter validation

@infinitebrahmanuniverse/nolb-react-g-@everything-registry/sub-chunk-2557 @zalastax/nolb-react-g-

0.0.1

5 years ago