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.
<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.
Source: text-mask/text-mask