Input masking

Some text inputs require values with a specific format. With Material-UI TextField components, you can add masking capabilities that help guide the user toward providing the correct format.

How to do it...

Let's say that you have phone number and email fields and you want to provide an input mask for each. Here's how you can use the MaskedInput component from react-text-mask with TextField components to add masking abilities:

import React, { Fragment, useState } from 'react';
import MaskedInput from 'react-text-mask';
import emailMask from 'text-mask-addons/dist/emailMask';

import { makeStyles } from '@material-ui/styles';
import TextField from '@material-ui...