Maskfy 2 - Input Mask Simple

A React library without a dependency... Very simple to install and use. With only 1kb (gzip) code, IE Compatibility, it's also well accepted on mobile devices

Install / Usage

Install npm Maskfy

npm i react-maskfy

Import Component

Insert a selector in class tag

import Maskfy from 'react-maskfy'

Usage Component

<Maskfy mask={'(99) 9999-99999'}>
  <input id="Phone" name="Phone" />
</Maskfy>
or
<Maskfy mask={'(99) 9999-99999'}>
  <TextField id="Phone" name="Phone" />
</Maskfy>

Component (props)

<Maskfy mask={'(99) 9999-99999'} reverse={true} minSize={3} defaultValue={'123'} letters={false} after={handleEvent}>
  <input id="Phone" name="Phone" />
</Maskfy>

mask

{String: undefined} (required) selector input

reverse

{Boolean: false} reverse typing

minSize

{Number: undefined} minimum digits

defaultValue

{String: undefined} initial value

letters

{Boolean: false} allowed letters

after

{Function: undefined} after input event

Examples

Source

Github | Example | Vanilla npm | React | @figuarnieri