#873·text-mask

Using text-mask with Ant design Input component

Author: evrencoskunCreated Nov 13, 2018Updated Aug 9, 2023

Hi guys,

I have been testing this library to implement my personal project. And as you understand from the title, I want to use this component together with ant design Input component using its render attribute. However, it doesn't work with that.

javascript
 <TextMask
        mask={[/[12]/, /\d/, /\d/, /\d/, "-", /[01]/, /\d/, "-", /[0-3]/, /\d/]}
        placeholderChar="_"
        showMask
        render={(ref, props) => (
          <Input
            name="phone"
            className="form-control"
            placeholder="Hey I am Ant design Input"
            required
            ref={ref}
            {...props}
          />
        )}
      />

If I change the <Input> tag with <input> It shows formatted text like we expect.

My main intention to show every input component should be displayed like an ant design component.

You can make it using react-input-mask library.