npm i react-imask
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import React from "react"; import { IMaskInput } from "react-imask"; const ContactNumberMask = "+{00}(0000)00-0000"; const EmailAddressMask = /^\S*@?\S*$/; export default function InputControlForm() { return ( <div className="container mt-5"> <form> <h2>React Input Control Pattern Masking Example</h2> <div className="form-group mb-3"> <label className="mb-1">Phone Mask:</label> <IMaskInput className="form-control" mask={ContactNumberMask} placeholder="+21(6951)46-6542" onAccept={(value, mask) => console.log(value, mask)} value="" /> </div> <div className="form-group mb-3"> <label className="mb-1">Range Number Mask:</label> <IMaskInput className="form-control" mask={Number} placeholder="Number 80 - 1000" min={80} max={1000} onAccept={(value, mask) => console.log(value, mask)} value="" /> </div> <div className="form-group mb-3"> <label className="mb-1">Date Mask:</label> <IMaskInput className="form-control" mask={Date} placeholder="Date" min={new Date(2015, 0, 1)} max={new Date(2022, 0, 1)} onAccept={(value, mask) => console.log(value, mask)} /> </div> <div className="form-group mb-3"> <label className="mb-1">Email Mask:</label> <IMaskInput className="form-control" mask={EmailAddressMask} placeholder="Email" onAccept={(value, mask) => console.log(value, mask)} /> </div> </form> </div> ); } |
