react-number-formatter

This React input component automatically formats phone numbers as you type and returns the actual number you entered. 😊

Installation

Run this command in your terminal

npm add react-number-formatter

| Props | Description | | --- | --- | | getCountryCode | To get selected country code | | format | To create your own format | | defaultCountry | To make a country default selected | | onlyCountries | To filter country options | | fixLength | To limit input length | | disabled | To make input and selector disable| | fullIsoCode | Sets 3 letter ISO Code e.g. "IND", "USA"| | searchOption | To add or remove search bar| | register | To use this input inside react-hook-form| | flags: Boolean | To get country code instead of flag | | placeholder: String | To change placeholder | | initialFormat: Boolean | When using this component in editable forms. this function automatically guess the the dial code and formats the number|

Demo with hook form

Normal Usage

import { NumberFormatter } from 'react-number-formatter';

const [number, setNumber] = useState();

//for typescript
const [number, setNumber] = useState<string | number>();

<NumberFormatter
  value={number}
  initialFormat={true}
  getValue={(n: string) => setNumber(n)}
/> 

You can create your own format.

<NumberFormatter
  format={"+1 (###)-(###)-####"}
  value={number}
  getValue={(n: string) => setNumber(n)}
/>