Input Masking for React
A flexible and robust input masking library that seamlessly integrates IMask.js with Ant Design and RC Input components for React applications.
Visit websiteThe Problem
When building forms in React applications, developers often need to format user input in real-time - phone numbers, credit cards, dates, and custom patterns. While IMask.js is a powerful masking library, integrating it with modern React component libraries like Ant Design requires careful handling of refs, state management, and TypeScript types.
The Solution
Mask-Input bridges this gap by providing ready-to-use React components that wrap IMask.js functionality with full TypeScript support. The library offers two main components: InputMask for HTML Input and AntdInputMask for Ant Design/RC Input, both supporting all native input props while adding powerful masking capabilities.
Installation
You can install the core library or the Ant Design wrapper from NPM:
# Core library npm install mfk-mask-input # Ant Design wrapper npm install mfk-mask-input-antd
Key Features
The library provides comprehensive TypeScript definitions, making it easy to work with masked and unmasked values. It supports all IMask.js mask types including patterns, numbers, dates, and dynamic masks. The components are fully compatible with form libraries and expose both masked display values and raw unmasked data through a custom onChange event.
Technical Stack
Built with React 19 and TypeScript, the library leverages IMask.js 6.6 for powerful masking capabilities. It integrates seamlessly with Ant Design 5 and RC Input components, providing a modern development experience with Vite for fast builds and hot module replacement.
Usage Example
The components are designed to be intuitive and easy to use. Simply import the component, define your mask pattern, and handle the onChange event to access both masked and unmasked values:
import { MaskInput } from './components/mask-input';
<MaskInput
mask="+1 (000) 000-0000"
placeholder="Enter phone number"
onChange={(e) => {
console.log('Masked:', e.maskedValue);
console.log('Unmasked:', e.unmaskedValue);
}}
/>Open Source
This project is open source and available on GitHub. It demonstrates best practices for creating reusable React components with TypeScript, proper ref forwarding, and third-party library integration. The codebase showcases modern React patterns including hooks, forwardRef, and proper cleanup in useEffect.