-
-
Save Exclsv/09a91a783248dcc9b532365e56ad680b to your computer and use it in GitHub Desktop.
Uzbekistan phone number input component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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} | |
| /> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment