Skip to content

Instantly share code, notes, and snippets.

@iRajatDas
Last active April 8, 2024 07:45
Show Gist options
  • Save iRajatDas/bf81d8ab37baa216fc6637d7d125c4ec to your computer and use it in GitHub Desktop.
Save iRajatDas/bf81d8ab37baa216fc6637d7d125c4ec to your computer and use it in GitHub Desktop.
import "@/styles/react-intl.css"
import React, { useState, ReactElement } from "react";
import { createRoot } from "react-dom/client";
import IntlTelInput from "../src/intl-tel-input/react";
import utilsScriptURL from "intl-tel-input/build/js/utils";
const errorMap = [
"Invalid number",
"Invalid country code",
"Too short",
"Too long",
"Invalid number",
];
const App = (): ReactElement => {
const [isValid, setIsValid] = useState<boolean | null>(null);
const [number, setNumber] = useState<string | null>(null);
const [errorCode, setErrorCode] = useState<number | null>(null);
const [notice, setNotice] = useState<string | null>(null);
const handleSubmit = (): void => {
if (isValid) {
setNotice(`Valid number: ${number}`);
} else {
const errorMessage = errorMap[errorCode || 0] || "Invalid number";
setNotice(`Error: ${errorMessage}`);
}
};
return (
<form>
<IntlTelInput
onChangeNumber={setNumber}
onChangeValidity={setIsValid}
onChangeErrorCode={setErrorCode}
initOptions={{
initialCountry: "us",
utilsScript: utilsScriptURL,
}}
/>
<button className="button" type="button" onClick={handleSubmit}>Validate</button>
{notice && <div className="notice">{notice}</div>}
</form>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment