Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/forge42dev/react-input-mask
Input masking for React
https://github.com/forge42dev/react-input-mask
input-mask react reactjs
Last synced: about 1 month ago
JSON representation
Input masking for React
- Host: GitHub
- URL: https://github.com/forge42dev/react-input-mask
- Owner: forge42dev
- License: mit
- Created: 2023-04-23T15:40:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-11T13:36:21.000Z (about 1 year ago)
- Last Synced: 2024-10-29T00:55:42.741Z (about 2 months ago)
- Topics: input-mask, react, reactjs
- Language: TypeScript
- Size: 189 KB
- Stars: 37
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.MD
Awesome Lists containing this project
README
# React Input Mask
React Input Mask is an open source library for React that provides an easy way to apply masks to input fields.
Masks can be used to enforce specific formatting for user input, such as phone numbers, social security numbers, and credit card numbers. With React Input Mask, you can define a mask for your input field, and the library will automatically format the user's input according to the specified mask.
## Why React Input Mask?
React Input Mask is a lightweight library that provides a simple API for applying masks to input fields. It is built on top of React Hooks, and is designed to be used with functional components. It is also compatible with libraries such as react-hook-form.
The design philosophy behind React Input Mask is to provide a simple API that is easy to use and understand via a hook instead of
a component.
It is also designed to be used with Next.js and Remix.run and other server-side rendering frameworks.
## Installation
React Input Mask can be installed via npm or yarn:
`npm install @code-forge/react-input-mask`
`yarn add @code-forge/react-input-mask`
## Usage
Using React Input Mask is easy. Simply import the useInputMask hook from the library, and pass the mask prop to the hook. The hook will return an object containing the value and onMouseDown props that you can pass to your input field.
```jsx
import React from 'react';
import { useInputMask } from '@code-forge/react-input-mask';
const MyComponent = () => {
const { getInputProps } = useInputMask({ mask: 'One does not simply walk into AAAAAA' });
return (
{
// Your onChange handler gets the output of the hook (won't trigger if the input is invalid)
console.log(e.target.value);
}} />
);
};
```
In the example above, we've applied a mask to fill the word needed to complete the sentence.
You can customize the mask to fit your needs by using a variety of special characters that represent different types of input.
| Character | Description |
|-----------|-------------|
| 9 | Represents a number.|
| A | Represents a letter. |
| * | Represents a wildcard. |
## Available Props
| Prop | Type | Description | Default |
|------|------|-------------|---------|
| mask | string | The mask to apply to the input field. | undefined |
| placeholderChar | string | The character to use as a placeholder for the mask characters (eg. 999-999 with placeholderChar set to "@" will produce @@@-@@@). | "_" |
| charRegex | RegExp | A regular expression that represents the characters that are allowed to be entered into the input field. | /^[a-zA-Z]*$/|
| numRegex | RegExp | A regular expression that represents the numbers that are allowed to be entered into the input field. | /^[0-9]*$/ |
| type | "raw" or "mask" | The type of value to return from the hook. If set to "raw", the hook will return the raw value of the input field (eg. mask 999-999-99 with 111-111-11 will output 11111111). If set to "mask", the hook will return the masked value of the input field. (eg. mask 999-999-99 with 111-111-11 will output 111-111-11) | "raw" |
| value | string | The initial value of the input field. (The hook expects to be given a value created by itself, if you provide an invalid value it will try to fill as much of the mask as it can but relies on you to pass it a positive value, otherwise it will default to its default values) | undefined |
## Examples
### Phone Number
```jsx
import React from 'react';
import { useInputMask } from '@code-forge/react-input-mask';
const MyComponent = () => {
const { getInputProps } = useInputMask({ mask: '+(999) 999-9999' });
return (
);
};
```
### Social Security Number
```jsx
import React from 'react';
import { useInputMask } from '@code-forge/react-input-mask';
const MyComponent = () => {
const { getInputProps } = useInputMask({ mask: '999-99-9999' });
return (
);
};
```
### Credit Card Number
```jsx
import React from 'react';
import { useInputMask } from '@code-forge/react-input-mask';
const MyComponent = () => {
const { getInputProps } = useInputMask({ mask: '9999 9999 9999 9999' });
return (
);
};
```
### Handle keyDown before the mask
```jsx
import React from 'react';
import { useInputMask } from '@code-forge/react-input-mask';
const MyComponent = () => {
const { getInputProps } = useInputMask({ mask: '9999 9999 9999 9999' });
const maskProps = getInputProps();
return (
{
// do something
maskProps.onKeyDown(e);
}} value={maskProps.value} />
);
};
```
### Usage with react-hook-form
```jsx
import React from 'react';
import { useForm } from 'react-hook-form';
import { useInputMask } from '@code-forge/react-input-mask';
const MyComponent = () => {
const { register, handleSubmit } = useForm();
const { getInputProps } = useInputMask({ mask: '9999 9999 9999 9999' });
return (
console.log(data))}>
Submit
);
};
```
## Support
If you like the project, please consider supporting us by giving a ⭐️ on Github.
## License
MIT
## Bugs
If you find a bug, please file an issue on [our issue tracker on GitHub](https://github.com/Code-Forge-Net/react-input-mask/issues)
## Contributing
Thank you for considering contributing to @code-forge/react-input-mask! We welcome any contributions, big or small, including bug reports, feature requests, documentation improvements, or code changes.
To get started, please fork this repository and make your changes in a new branch. Once you're ready to submit your changes, please open a pull request with a clear description of your changes and any related issues or pull requests.
Please note that all contributions are subject to our [Code of Conduct](https://github.com/Code-Forge-Net/react-input-mask/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.
We appreciate your time and effort in contributing to react-input-mask and helping to make it a better tool for the community!