How to Add Pattern Masking in Input Control in React 18

Last Updated on March 4, 2024 by Digamber in React JS

Validation is essential in web application development, It provides data accuracy and prevents the submission of inaccurate or incomplete data. Pattern masking is an input control validation technique that defines a specific format or pattern for user input controls in our form fields.

In this tutorial, we will learn how to implement pattern masking in input controls using React, regular expression or RegExp, functional component, and the react-imask package.

Pattern masking allows developers to quickly reduce the quantity of incorrect input items, which adds the additional layer of security, by ensuring data consistency and resulting in better user experience. .

 

Step 1: Create React Application

For newcomers or those unfamiliar with setting up React projects, follow these steps:

Open your integrated terminal window or a separate terminal instance.

Execute the command:

npx create-react-app coffee-cup

Navigate to the created application folder:

cd coffee-cup

Step 2: Installing iMask JavaScript Package

To integrate iMask for pattern masking, run:

npm i react-imask --legacy-peer-deps

Step 3: Adding Bootstrap Package

Bootstrap enhances UI components. Install it via:

npm install bootstrap --legacy-peer-deps

Next, open the App.js there you require to import the bootstrap CSS.

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

Step 4: Implementing Pattern Masking

The implementation involves adding masks to different input types like email, date, number, and phone.

Add the mask=”” property in Email, Date, Range Number, and Phone input controls.

In the components/ folder, generate the InputControlForm.js file, thereafter, add given code to 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: Registering Components in App.js

If you try to see Inside your project directory, you will see the src/App.js file, which is where you have to go next.

After getting into the file, you need to register the form component, which 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

To execute the code example requires starting the React application’s development server.

We are going to present to you simple command that runs the app development server relentlessly.

npm start

Right after you evoke the server, command line displays two urls.

You can either of the url to view the app on the browser.

http://localhost:3000

Conclusion

This post has explained how to use pattern masking in React, providing a quick and easy way to improve form validation.

Developers may improve data accuracy by streamlining data input processes with the help of the iMask package and its many capabilities.

Please get in touch if you have any questions or if any information is missing, and spread the word about this tutorial by having others do the same!

Suggested Links

Reference: React iMask