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