react-input-formatter
v1.0.5
Published
A simple template for a custom React component imput formatter
Downloads
55
Maintainers
Readme
react-input-formatter
Table of Contents
About
react-input-formatter
is a lightweight and flexible React component that formats the output of input fields according to a provided format template. It ensures consistent and user-friendly input formatting for various types of data such as phone numbers, credit card numbers, dates, and more.
Installation
To install the package, use the following command:
npm install react-input-formatter
OR
yarn add react-input-formatter
Usage
import {FormattedInput} from "react-formatted-input";
const ComponentName = ()=>{
return <>
<FormattedInput name="postalCode" id="postalCode-id" placeholderText="" formatTemplate="###-###" defaultValue=""/>
</>
}
export default ComponentName;
This code will allow the inputs of the following format: A1B2C3 and will make it A1B-2C3.
Props
formatTemplate
: This is the masked version of the input that we want the user to input.#
can be used to mask a character input. This includes all the alphanumeric characters.9
can be used to mask a character input containing a number.@
can be used to mask a character input of special character.
Examples:
###-####
will allow an input of A1B-2C3D(999)999-999
will allow an input of (123)456-7890
Contributing
Contributions are welcome! Please read the contributing guidelines first.
- Fork the repository.
- Create a new branch (git checkout -b feature-branch).
- Commit your changes (git commit -am 'Add new feature').
- Push to the branch (git push origin feature-branch).
- Create a new Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.