https://github.com/levidavidmurray/input-formatter

Configurable input formatter to dynamically change input value
https://github.com/levidavidmurray/input-formatter

Last synced: about 2 months ago
JSON representation

Configurable input formatter to dynamically change input value

• Host: GitHub
• URL: https://github.com/levidavidmurray/input-formatter
• Owner: levidavidmurray
• Created: 2019-01-19T12:50:31.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T16:57:18.000Z (almost 2 years ago)
• Last Synced: 2024-09-22T06:17:51.322Z (4 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.81 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Input Formatter



  



Input that only allows numbers, and formats the input text to your desired format as you type.

[Try it out!](https://levidavidmurray.github.io/input-formatter)



## Usage

```shell script

yarn add @levidavidmurray/input-formatter

```

```typescript

import {InputFormatter} from '@levidavidmurray/input-formatter';

const formatter = InputFormatter({

  formats: {

    3: '(xxx',

    6: '(xxx) xxx',

    10: '(xxx) xxx-xxxx',

    11: '+x (xxx) xxx-xxxx'

  },

  replaceChar: 'x',

  skipFormatOpts: [{length: 10, position: 1, skip: false}],

});

formatter.on('#input');

```

## Formatter Config

```js

{

  // `formats` takes a specified input max-length as a key, and the desired format 

  // for any numeric input string whose length is less than or equal to the max-length

  formats: {

    3: '(xxx',

    6: '(xxx) xxx',

    10: '(xxx) xxx-xxxx',

    11: '+x (xxx) xxx-xxxx'

  },

  // `replaceChar` specifies the character to replace in each format string

  replaceChar: 'x', // default 'x'

  // `skipFormatOpts` an array specifying whether or not to skip formatting when

  // the input length and caret position are at the specified length and position

  skipFormatOpts: [{length: 10, position: 1, skip: false}],

}

```