react-text-input-mask
v1.0.12
Published
React component for masked text input
Downloads
21
Readme
react-text-input-mask
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.
Getting Started
Installation
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
Example
Import react-text-input-mask
import { MaskedInput } from 'react-text-input-mask';
Basic usage
<MaskedInput mask='TR99 9999 9999 9999 9999 9999 99'>
<input placeholder='Enter IBAN' />
</MaskedInput>
<MaskedInput mask='99/99'>
<input placeholder='MM/YY' />
</MaskedInput>
You can use ant design
import { Input } from 'antd';
<MaskedInput mask='9999 9999 9999 9999'>
<Input placeholder='Enter card number'/>
</MaskedInput>
You can use styled-components
import styled from 'styled-components';
const StyledInput = styled.input``;
<MaskedInput mask='(999) 999 99 99'>
<StyledInput placeholder='Enter phone number'/>
</MaskedInput>