react-auto-formatting-input
v1.0.3
Published
A React input with customizable pattern rules to auto format the user input.
Downloads
8
Readme
Demo
Check out a demo here: Demo
Installation
With NPM
npm install react-auto-formatting-input
Getting Started
import AutoFormattingInput, {
InputType,
PhonePattern,
} from 'react-auto-formatting-input';
const App = () => {
const [value, setValue] = useState('');
return (
<AutoFormattingInput
value={value}
onValueChange={setValue}
pattern={PhonePattern}
type="int"
/>
);
};
Documentation
The AutoFormattingInput
component accepts a pattern prop, which defines the formatting rules for the input field. This pattern prop allows you to customize how the input value is displayed to the user.
Type
The type
prop of the AutoFormattingInput
component determines the validation rules for the input field. It can be one of the following predefined types or a custom regular expression:
- int: Accepts only integer values.
- float: Accepts floating-point numbers.
- string: Accepts any character, including whitespace.
- alpha: Accepts alphabetic characters only.
- alphanumeric: Accepts alphanumeric characters only.
- Custom Regex: You can also define a custom regular expression to validate the input.
Predefined Patterns
The package provides several predefined patterns for common formatting tasks. These patterns can be imported and used directly in your application without the need for custom configuration.
Phone Number Pattern
- (XXX) XXX-XXXX
Credit Card Number Pattern
- XXXX XXXX XXXX XXXX
Date Pattern
- MM / DD / YYYY
Currency Pattern
- X,XXX,XXX.XX
Zip Code Pattern
- XXXXX - XXXX
Custom Patterns
A pattern is defined using an array of objects, where each object represents a formatting instruction. There are four types of formatting instructions:
Quantity: Specifies the number of characters to include in the input field.
- Key:
quantity
- Value: Number representing the quantity of characters.
- Key:
Insert: Inserts a specific string into the input field.
- Key:
insert
- Value: String to be inserted.
- Optional Key:
before
- Value: Boolean indicating whether to insert the string before or after the current cursor position.
- Key:
Repeat: Repeats a sequence of patterns a specified number of times.
- Key:
repeat
- Value: Object with two keys:
pattern
: An array of pattern objects to be repeated.times
: Number indicating how many times to repeat the sequence or -1 for infinite.
- Key:
Backwards: Formats the input in reverse order, breaking it at a specified character.
- Key:
backwards
- Value: Object with two keys:
pattern
: An array of pattern objects that will be applied to a reversed input value.breakChar
: Character at which to break the string.
- Key:
Example Patterns
Zip Code Pattern
This pattern formats a zip code by inserting a hyphen after the first five characters.
const ZipCodePattern = [
{
quantity: 5,
},
{
insert: ' - ',
before: true,
},
{
quantity: 4,
},
];
Currency Pattern
This pattern formats currency by inserting commas every three digits from the right, with a period as the decimal separator.
const CurrencyPattern = [
{
backwards: {
pattern: [
{
repeat: {
// Repeat the xxx,xxx,xxx,xxx, pattern to add commas
pattern: [
{
quantity: 3,
},
{
insert: ',',
},
],
times: -1, // Repeat infinitely
},
},
],
breakChar: '.', // Stop the pattern when the user types a period
},
},
{
quantity: 2, // Two more characters which are the decimal numbers after the period breakChar
},
];