react-number-formatter

This react input component automatically formats phone numbers inside input and returns the number you actually typed.

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

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)}
/>

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