react-mask-essentials

A many purpose input mask toolkit, currently includes number masks, character masks, date masks and credit to jsillitoe and contributors for the currency masks.

Installation

npm install react-mask-essentials --save

Integration

You can create a mask like the following, it can accept all of the properties that an input element can accept

import {NumberMask} from 'react-mask-essentials';
import {CharMask} from 'react-mask-essentials';
import {IsoDateMask} from 'react-mask-essentials';
import {CurrencyMask} from 'react-mask-essentials'
 
const App = () => (
  <div>
    <NumberMask placeholder="0" type="integer" />
    <CharMask className="foo" mode="alphabet" />
    <IsoDateMask id="bar" separator="-" />
    <CurrencyMask prefix="£" />
  </div>
);
 
export default App;

Options

Option	Default Value	Description
type	integer	For NumberMasks, accepts "integer" and "float"
mode	alphabet	For CharMasks, accepts "alphabet", "special", "both" and "email"
separator	/	For IsoDateMasks, accepts any character as a separator for the YYYY MM and DD values

For more on currency masks see jsillitoe's library here

Feel free to contribute and add new features or improve current ones, thanks!