React Material-UI Cookbook

How it works...

To make this work, you created a PhoneInput component and an EmailInput component. The idea of each is to provide a basic abstraction around the MaskedInput component. Let's take a closer look at each, starting with PhoneInput:

const PhoneInput = ({ inputRef, ...props }) => (  <MaskedInput    {...props}    ref={ref => {      inputRef(ref ? ref.inputElement : null);    }}    mask={[      '(',      /[1-9]/,      /\d/,      /\d/,      ')',      ' ',      /\d/,      /\d/,      /\d/,      '-',      /\d/,      /\d/,      /\d/,      /\d/    ]}    placeholderChar={'\u2000'}  />);

The properties that are passed to PhoneInput are forwarded to MaskedInput for the most part. The ref property needs to be set explicitly because it's named differently. The placeholder property is set to be whitespace. The mask property is the most ...