npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-auto-formatting-input

v1.0.3

Published

A React input with customizable pattern rules to auto format the user input.

Downloads

13

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:

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