Using text-mask with Ant design Input component

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.

Issue Analytics

State:
Created 5 years ago
Comments:16

Top GitHub Comments

18reactions

theRafaelThinassicommented, Nov 30, 2018

Just set de className like this: className=“ant-input”

5reactions

FrenchMajestycommented, Jul 2, 2019

@Stackout What antd version are you on?

I tried implementing your solution but I could not get the masking to go through.

// Package.json
{
  "antd": "3.19.6",
  "react-text-mask": "5.4.3",
}

Also how are you implementing your form logic? Are you passing down the form prop from the parent or is it the one from the decorator Form.create()(Input) ? How are you handling the field validation with that phone number input?

EDIT:

After spending some time playing around and digging into how getFieldDecorator and Input work; I was able to figure out something that works under the versions I have (latest as of July 2019).

Here is a gist of the PhoneNumberInput I created: https://gist.github.com/FrenchMajesty/6758013397e065a831211879423818fd

And it would simply be used as follow:

<Form.Item label="Phone number">
    {this.props.form.getFieldDecorator('number', {
        initialValue: number,
        rules: [
            {required: true, whitespace: true, message: 'Please enter your phone number.'},
        ],
    })(
        <PhoneNumberInput placeholder="Enter your phone number" maxLength={14} />
    )}	
</Form.Item>

I designed the PhoneNumberInput component to work well specifically within a Form but I’m sure it can be tweaked depending on use case.

Top Results From Across the Web

Using Text Mask component with Ant design Input

I have been testing 'react-text-mask' library and I want to use this component together with ant design Input component using its render ...

Input - Ant Design

A basic widget for getting the user input is a text field. ... You can use the Input in conjunction with Tooltip component...

antd-mask-input - npm Package Health Analysis - Snyk

An Ant Design Input component for <input> masking, built on top of imask. The version 2.0.0 Requires antd >= 4.19.0 - for previous...

antd-mask-input examples - CodeSandbox

Learn how to use antd-mask-input by viewing and forking example apps that make use of antd-mask-input on CodeSandbox. React / Ant Design /...

React-text-mask NPM

Customize Rendered <input> Component. For advanced uses, you can customize the rendering of the resultant <input> via a render prop. This is entirely...