React Js Tutorial- How To Set Pattern Masking In Input Control

React Js Set Pattern Masking In Input Control Tutorial

Let’s learn in this React Js tutorial how to apply masking in input controls using the iMask package.

It’s important to understand firstly what pattern masking is and how significant is it to implement it for amplifying the user’s experience?

 

The form validation is added to the input controls to prevent users from sending wrong information. Generally, the user enters the information in the input fields, click on the submit button to send the data to the server.

 

If the information does not match the validation criteria, then we show them errors to let them know what needs to be corrected. This process is called traditional and validates form info on the client-side or seldom on the server-side.

 

In the server-side scenario, we may lose some bandwidth. But, we can add the validation and stop the user from entering wrong information while entering info into the input fields.

So, this functionality is called input control pattern masking. We will get to know in this guide how to implement pattern masking in form fields in React for which, we will be using iMask package.

 

Below given are some of the features that we get with this package:

• get and set value and unmasked value easily
• no external dependencies
• supports overwrite mode
• supports all major browsers and *IE11+
• supports web components
• supports contenteditable
• RegExp Mask
• function mask
• number mask (integer and decimal support)
• date mask (with various format support and autofix mode)
• dynamic/on-the-fly mask
• pattern mask

 

How To Set Pattern Mask React Form Input Controls Using iMask Javascript Plugin

Step 1- Create React App

Step 2- Install iMask Javascript Package

Step 3- Add Bootstrap Package

Step 4- Implement Pattern Masking

Step 5- Register Component In App Js

Step 6- Start React App

 

Step 1- Create React App

The first step is quite a basic one in which we simply have to create the new React app. For this, we use create-react-app using the below-given command on the terminal. There, we execute the command in order to download the new React app:

npx create-react-app coffee-cup

Afterward, we move into the app folder:

cd coffee-cup

 

Step 2- Install iMask Javascript Package

In the second step, we need to install the iMask Javascript Package for which we have to ytpe the following command on the terminal for execution:

npm i react-imask

 

Step 3- Add Bootstrap Package

Here, we will be adding the Bootstrap Library to the React project:

npm install bootstrap

Next, we need to open the App.js where we import the Bootstrap CSS:

import 'bootstrap/dist/css/bootstrap.min.css'

 

Step 4- Implement Pattern Masking In Email, Date, Range Number, Phone

The following code will be used to add pattern masking in input controls. The iMaskInput module has to be imported before the InputControlForm class.

Then, we add the mask=”” property in Email, Date, Range Number, Phone input controls.

In the components/ folder, we need to generate the InputControlForm.js file. Then, we put the following code in the file:

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>
  )
}

 

Step 5- Register Component In App Js

We will see the src/App.js file inside our project directory. After we have gone into the file, we require to register the form component. It will make it available throughout the app:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import InputControlForm from './components/InputControlForm'
export default function App() {
  return (
    <div className="App">
      <InputControlForm />
    </div>
  )
}

 

Step 6- Start React Project

Now, we have reached the end of this tutorial where we have to run the app.

Using the simple command, we will run the app development server:

npm start

 

Conclusion

So, in this tutorial, we have learned to decode the patterned masking in React app. We have seen how to integrate the pattern masking feature in form fields. Also, we had seen regular validation and pattern masking validation mechanisms.

 

Thanks