react-text-input-mask
TypeScript icon, indicating that this package has built-in type declarations

1.0.12 • Public • Published

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>

Package Sidebar

Install

npm i react-text-input-mask

Weekly Downloads

5

Version

1.0.12

License

MIT

Unpacked Size

9.25 kB

Total Files

22

Last publish

Collaborators

  • habibkoc