Input with auto-formatting

For phone numbers, currencies, credit cards and more...

_{By Stuart Robinson}

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:

1. Quantity: Specifies the number of characters to include in the input field.

   • Key: quantity
   • Value: Number representing the quantity of characters.

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

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

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

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
  },
];