tformat.js v1.1.1

tformat.js

Tformat.js is a lightweight library for number formatting (credit card and phone numbers, for example)

Examples can be found here

Table of contents

1. Usage
2. React
3. Constructor options

Usage

Download tformat.js via npm

npm i tformat.js

or directly from the repo.

Then import it

<script src="tformat.min.js"></script>

To apply a tformat to input element with id inputField, create a new class by passing element id or HTMLInputElement

let tformat = new TemplateFormatter('inputField', { 
  template: '123 xxx xxx xxx',
  createHiddenInput: true,
  showPrefixOnFocus: true,
  prefixes: ["456 "]
});

Where character x in template is any number

Template can be with multiple prefixes. In example above, template contains two prefixes: 123 and 456

Tformat can also be initialized with a HTMLInputElement

let tformat = new TemplateFormatter(document.getElementById('inputField'), { 
    ...

React

You can also use tformat in React

import React, { useState } from 'react';
import { TFReact } from 'tformat.js';

const MyComponent = () => {
    const [formattedValue, setFormattedValue] = useState('');
    const [unformattedValue, setUnformattedValue] = useState('');

    return (
        <TFReact
            template="+1 xxx xxx"
            showPrefixOnFocus={true}
            onFormatted={(val, rawVal) => { setFormattedValue(val); setUnformattedValue(rawVal); }} />
    )
}

React component TFReact comes with npm package

Constructor options

Constructor has two parameters

new TemplateFormatter(input, props)

First parameter of constructor is an element that need to be formated. It can be an id of element as string or input itself as HTMLInputElement

Additional options goes in second parameter as one object. Possible object properties listed below

Properties

template

string Template for number formatting. Template can be reassigned.

prefixes

string[]

All possible prefixes of template.