title |
---|
usePhoneInput |
usePhoneInput is a custom hook provides full functionalities of the PhoneInput component to an existing input.
To start using usePhoneInput, you can install the @react-awesome/phone-input
library or you can import it directly from @react-awesome/components
if you have installed it before. In your project directory, run
the following command to install the dependencies:
npm i @react-awesome/phone-input
import { useState } from 'react' import { Container } from '../../../components/Container' import { usePhoneInput } from '@react-awesome/components' import { Callout } from 'nextra/components'
export const Example = () => { const [value, setValue] = useState({ isPossible: false, isValid: false, e164Value: '', country: 'VN', phoneCode: '84', formattedValue: '', isSupported: true, }); const { register } = usePhoneInput({ onChange: (_, m) => { setValue(m); } });
return (
-
{Object.keys(value).map((key) => {
const v = value[key]
return (
-
👉 {key}
{v.toString()}
)
})}
import { usePhoneInput } from '@react-awesome/phone-input'
const Example = () => {
const { register } = usePhoneInput()
return (
<input
placeholder="I have been upgraded with usePhoneInput 😎"
{...register('use-phone-input')}
/>
)
}
By default usePhoneInput has mode
is set to international
.
When mode
is international
the value will be formatted as e164
.
When mode
is national
the country code and the +
sign will be ignored. Value is formatted as national format of the current selected country.
export const LocalExample = () => { const [value, setValue] = useState({ isPossible: false, isValid: false, e164Value: '', country: 'VN', phoneCode: '84', formattedValue: '', isSupported: true, }); const { register, phoneCode } = usePhoneInput({ onChange: (_, m) => { setValue(m); }, mode: 'national', defaultCountry: 'VN', value: value.formattedValue });
return (
-
{Object.keys(value).map((key) => {
const v = value[key]
return (
-
👉 {key}
{v.toString()}
)
})}
import { usePhoneInput } from '@react-awesome/phone-input'
const Example = () => {
const { register } = usePhoneInput({
mode: 'national',
})
return (
<input
placeholder="I am a local phone input"
{...register('use-phone-input')}
/>
)
}
usePhoneInput also accepts country
prop.
When country
is provided then the enterred value is formatted based on the provided country code and the country detection behaviour will be disabled.
export const FixedCountryExample = () => { const [value, setValue] = useState({ isPossible: false, isValid: false, e164Value: '', country: 'VN', phoneCode: '84', formattedValue: '', isSupported: true, }); const { register, phoneCode } = usePhoneInput({ onChange: (_, m) => { setValue(m); }, country: 'VN', defaultCountry: 'VN' });
return (
-
{Object.keys(value).map((key) => {
const v = value[key]
return (
-
👉 {key}
{v.toString()}
)
})}
import { usePhoneInput } from '@react-awesome/phone-input'
const Example = () => {
const { register } = usePhoneInput({
country: 'VN',
})
return (
<input
placeholder="I am a fixed country phone input"
{...register('use-phone-input')}
/>
)
}
country
can also work with national format.
export const FixedCountryWithNationalExample = () => { const [value, setValue] = useState({ isPossible: false, isValid: false, e164Value: '', country: 'VN', phoneCode: '84', formattedValue: '', isSupported: true, }); const { register, phoneCode } = usePhoneInput({ onChange: (_, m) => { setValue(m); }, country: 'VN', defaultCountry: 'VN', mode: 'national' });
return (
-
{Object.keys(value).map((key) => {
const v = value[key]
return (
-
👉 {key}
{v.toString()}
)
})}
import { usePhoneInput } from '@react-awesome/phone-input'
const Example = () => {
const { register } = usePhoneInput({
country: 'VN',
mode: 'national',
})
return (
<input
placeholder="I only accept Vietnamese phone number with national format"
{...register('use-phone-input')}
/>
)
}
The usePhoneInput
takes the following parameters:
Phone value
- Type:
string
- Default:
undefined
Supported countries
- Type:
CountryCode[]
- Default:
undefined
Default selected country
- Type:
CountryCode
- Default:
undefined
onChange handler.
The callback's event
could be undefined
when the event is triggered when user select another country.
- Type:
(ev: React.ChangeEvent<HTMLInputElement> | undefined, metadata: PhoneInputChangeMetadata) => void
- Default:
() => void 0
Use smart caret.
- Type:
boolean
- Default:
true
- Type:
international
|national
- Default:
international
When country is provided, the country detection behavior will be disabled.
- Type:
CountryCode
- Default:
undefined
The usePhoneInput
returns the following props:
Input element.
- Type:
HTMLInputElement
Register function returns input event handlers.
- Type:
PhoneInputRegister
Country option list to render.
- Type:
CountryCode[]
Indicator of country selector visible state.
- Type:
boolean
Show the country select pane.
- Type:
() => void
Hide the country select pane.
- Type:
() => void
Toggle the country select visible state.
- Type:
() => void
The current selected country.
- Type:
CountryCode
The current selected country's calling code.
- Type:
string
Set the selected country.
- Type:
(country : CounntryCode) => void
- Type:
object
- Type:
boolean
- Type:
boolean
- Type:
string
- Type:
CountryCode
- Type:
string
- Type:
string
- Type:
boolean
- Type:
string