Skip to content

Instantly share code, notes, and snippets.

@iRajatDas
Created April 8, 2024 07:40
Show Gist options
  • Save iRajatDas/4bfcb5a2d753db0db5c19e94a90935f0 to your computer and use it in GitHub Desktop.
Save iRajatDas/4bfcb5a2d753db0db5c19e94a90935f0 to your computer and use it in GitHub Desktop.
react telephone input
import "@/src/styles/intl-react.css";
import React, { useRef, useEffect } from "react";
import intlTelInput, { Iti, SomeOptions } from "intl-tel-input";
const IntlTelInput = ({
initialValue = "",
onChangeNumber = (): void => {},
onChangeCountry = (): void => {},
onChangeValidity = (): void => {},
onChangeErrorCode = (): void => {},
usePreciseValidation = false,
initOptions = {},
inputProps = {},
}: {
initialValue?: string;
onChangeNumber?: (number: string) => void;
onChangeCountry?: (country: string) => void;
onChangeValidity?: (valid: boolean) => void;
onChangeErrorCode?: (errorCode: number | null) => void;
usePreciseValidation?: boolean;
initOptions?: SomeOptions;
inputProps?: object;
}) => {
const inputRef = useRef<HTMLInputElement | null>(null);
const itiRef = useRef<Iti | null>(null);
const update = (): void => {
const num = itiRef.current?.getNumber() || "";
const countryIso = itiRef.current?.getSelectedCountryData().iso2 || "";
// note: this number will be in standard E164 format, but any container component can use
// intlTelInputUtils.formatNumber() to convert this to another format
// as well as intlTelInputUtils.getNumberType() etc. if need be
onChangeNumber(num);
onChangeCountry(countryIso);
if (itiRef.current) {
const isValid = usePreciseValidation
? itiRef.current.isValidNumberPrecise()
: itiRef.current.isValidNumber();
if (isValid) {
onChangeValidity(true);
onChangeErrorCode(null);
} else {
const errorCode = itiRef.current.getValidationError();
onChangeValidity(false);
onChangeErrorCode(errorCode);
}
}
};
useEffect(() => {
// store a reference to the current input ref, which otherwise is already lost in the cleanup function
const inputRefCurrent = inputRef.current;
if (inputRefCurrent) {
// console.log(itiRef);
itiRef.current = intlTelInput(inputRefCurrent, initOptions);
inputRefCurrent.addEventListener("countrychange", update);
}
return (): void => {
if (inputRefCurrent) {
inputRefCurrent.removeEventListener("countrychange", update);
}
itiRef.current?.destroy();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<input
type="tel"
ref={inputRef}
onInput={update}
defaultValue={initialValue}
{...inputProps}
/>
);
};
export default IntlTelInput;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment