react-text-input-mask
is a React component that provides input masking functionality. It allows you to enforce a specific input format, such as phone numbers, card number, or any custom pattern, directly within an input field.
This package is already published to NPM, use npm
or yarn
to download to local directory.
npm i react-text-input-mask
yarn add react-text-input-mask
import { MaskedInput } from 'react-text-input-mask';
<MaskedInput mask='TR99 9999 9999 9999 9999 9999 99'>
<input placeholder='Enter IBAN' />
</MaskedInput>
<MaskedInput mask='99/99'>
<input placeholder='MM/YY' />
</MaskedInput>
import { Input } from 'antd';
<MaskedInput mask='9999 9999 9999 9999'>
<Input placeholder='Enter card number'/>
</MaskedInput>
import styled from 'styled-components';
const StyledInput = styled.input``;
<MaskedInput mask='(999) 999 99 99'>
<StyledInput placeholder='Enter phone number'/>
</MaskedInput>