ramziddin · January 12, 2025 19:17 · ramziddin · Nov 20, 2024 · ramziddin · Nov 20, 2024
diff --git a/phone-input.ts b/phone-input.ts
 import { ComponentProps, useState } from "react"

 function PhoneInput(props: ComponentProps<"input">) {
  const [value, setValue] = useState<string>("+998")

  const formattedValue = value
    .replaceAll(" ", "") // remove whitespace
    .slice(4) // strip the country code
    .match(/(\d{1,2})?(\d{1,3})?(\d{1,2})?(\d{1,2})?/)! // split into multiple components
    .toSpliced(0, 1, "+998") // replace global match with country code
    .filter(Boolean) // remove empty components
    .join(" ") // convert array back to string joined by spaces

  return (
    <input
      value={formattedValue}
      onChange={(event) => {
        setValue(event.target.value)
      }}
      inputMode="tel"
      {...props}
    />
  )
 }
	import { ComponentProps, useState } from "react"

	function PhoneInput(props: ComponentProps<"input">) {
	const [value, setValue] = useState<string>("+998")

	const formattedValue = value
	.replaceAll(" ", "") // remove whitespace
	.slice(4) // strip the country code
	.match(/(\d{1,2})?(\d{1,3})?(\d{1,2})?(\d{1,2})?/)! // split into multiple components
	.toSpliced(0, 1, "+998") // replace global match with country code
	.filter(Boolean) // remove empty components
	.join(" ") // convert array back to string joined by spaces

	return (
	<input
	value={formattedValue}
	onChange={(event) => {
	setValue(event.target.value)
	}}
	inputMode="tel"
	{...props}
	/>
	)
	}