OverviewOfficial Website

Input Mask is a javaScript library for formatting input text content when you are typing.

Add Package
yarn add react-input-mask
Import Package
import Cleave from "react-input-mask";
Remove Package
yarn remove react-input-mask ( or you can remove package by removing specific package from package.json )
Date Formatting:
Title Javascript
Date 1 
const Date1 = props => (
<InputMask
    mask="99/99/9999"
    value={props.value}
    className="form-control input-color"
    onChange={props.onChange}
>   
</InputMask>
)
Date 2 
const Date2 = props => (
<InputMask
    mask="99-99-9999"
    value={props.value}
    className="form-control input-color"
    onChange={props.onChange}
>   
</InputMask>
)
Date 3 
const Date3 = props => (
<InputMask
    mask="9999-99-99 99:99:99"
    value={props.value}
    className="form-control input-color"
    onChange={props.onChange}
>   
</InputMask>
)
Currency 
const Currency = props => (
<InputMask
    mask="$ 999,999,999.00"
    value={props.value}
    className="form-control input-color"
    onChange={props.onChange}
>   
</InputMask>
)
Repeat 
const Repeat = props => (
<InputMask
    mask="9999999999"
    value={props.value}
    className="form-control input-color"
    onChange={props.onChange}
>   
</InputMask>
)
TAX 
const TAX = props => (
<InputMask
    mask="99-9999999"
    value={props.value}
    className="form-control input-color"
    onChange={props.onChange}
>   
</InputMask>
)
Ip Address 
const IPV4 = props => (
<InputMask
    mask="999.999.999.999"
    value={props.value}
    className="form-control input-color"
    onChange={props.onChange}
>   
</InputMask>
)
Phone 
const Phone = props => (
<InputMask
    mask="(999) 999-9999"
    value={props.value}
    className="form-control input-color"
    onChange={props.onChange}
>   
</InputMask>
)
© Skote.