# react-text-input-mask

> React component for masked text input

Latest version **1.0.14** (published 2026-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-text-input-mask
pnpm add react-text-input-mask
yarn add react-text-input-mask
bun add react-text-input-mask
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2026-04-07 |
| First published | 2024-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Habib Koc |
| Maintainers | habibkoc |
| Keywords | react, typescript, mask-input |

## Links

- npm: https://www.npmjs.com/package/react-text-input-mask
- Repository: https://github.com/Hkc1673/react-masked-input
- Homepage: https://github.com/Hkc1673/react-masked-input#readme
- Issues: https://github.com/Hkc1673/react-masked-input/issues
- npm.io page: https://npm.io/package/react-text-input-mask

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.6.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.14 (latest) — 2026-04-07
- 1.0.12 — 2024-06-27
- 1.0.11 — 2024-06-27
- 1.0.10 — 2024-06-26
- 1.0.9 — 2024-06-25
- 1.0.8 — 2024-06-25
- 1.0.7 — 2024-06-25
- 1.0.6 — 2024-06-25
- 1.0.5 — 2024-06-25
- 1.0.4 — 2024-06-25
- 1.0.3 — 2024-06-25
- 1.0.2 — 2024-06-25
- 1.0.1 — 2024-06-25
- 1.0.0 — 2024-06-25

## 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.

```bash
npm i react-text-input-mask
yarn add react-text-input-mask
```

### Example

### Import react-text-input-mask

```javascript
import { MaskedInput } from 'react-text-input-mask';
```

### Basic usage

```jsx
<MaskedInput mask='TR99 9999 9999 9999 9999 9999 99'>
    <input placeholder='Enter IBAN' />
</MaskedInput>
```

```jsx
<MaskedInput mask='99/99'>
    <input placeholder='MM/YY' />
</MaskedInput>
```
### You can use ant design
```jsx
import { Input } from 'antd';

<MaskedInput mask='9999 9999 9999 9999'>
    <Input placeholder='Enter card number'/>
</MaskedInput>
```
### You can use styled-components
```jsx
import styled from 'styled-components';
const StyledInput = styled.input``;

<MaskedInput mask='(999) 999 99 99'>
    <StyledInput placeholder='Enter phone number'/>
</MaskedInput>
```

---
_Source: https://npm.io/package/react-text-input-mask · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._