React component

This project includes an official React component alongside the original JavaScript plugin. It supports all of the same features, including the country picker, formatting, and validation, and comes with TypeScript type definitions included. View all of the supported props in the React component docs.

Below is a live demo and example code demonstrating form integration, validation (on blur/submit), and error messaging. For more patterns and use cases, explore the React demos.

JavaScript

import React, { useMemo, useState } from "react";
import IntlTelInput from "intl-tel-input/react";
import "intl-tel-input/styles";

const App = () => {
  const [number, setNumber] = useState("");
  const [isValid, setIsValid] = useState(false);
  const [errorCode, setErrorCode] = useState(0);
  const [noticeMode, setNoticeMode] = useState("off");

  const notice = useMemo(
    () => putYourNoticeLogicHere(noticeMode, isValid, number, errorCode),
    [noticeMode, isValid, number, errorCode],
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    setNoticeMode("submit");
  };

  return (
    <form onSubmit={handleSubmit}>
      <IntlTelInput
        onChangeNumber={setNumber}
        onChangeValidity={setIsValid}
        onChangeErrorCode={setErrorCode}
        initOptions={{
          initialCountry: "us",
          loadUtils: () => import("intl-tel-input/utils"),
        }}
        inputProps={{
          name: "phone",
          onBlur: () => setNoticeMode("blur"),
        }}
      />
      <button type="submit">Validate</button>
      {notice && <div className="notice">{notice}</div>}
    </form>
  );
};
export default App;