this library provides React components to display phone country selector.
You can pick the country with country number included and put your phone number with it.
Plus, the dataset can also be imported individually.
Using npm or yarn:
npm i react-phone-code-selector yarn add react-phone-code-selectorIt's very easy to use like below code.
import React, { useState } from 'react'; import { PhoneCodeSelector } from 'react-phone-code-selector'; type Props = {}; const CustomPhoneCodeSelector = () => { const [phone, setPhone] = useState<string>(''); return ( <PhoneCodeSelector width={300} defaultValue={phone} onChange={(value) => { setPhone(value); }} /> ); };with styled-components
import React, { useState } from 'react'; import { PhoneCodeSelector } from 'react-phone-code-selector'; type Props = {}; const CustomPhoneCodeSelector = () => { const [phone, setPhone] = useState<string>(''); return ( <CustomSelector width={300} defaultValue={phone} onChange={(value) => { setPhone(value); }} /> ); }; const CustomSelector = styled(PhoneCodeSelector)` width: 300px; border-radius: 15px; background-color: violet; .selector-option { background-color: red; } .selector-option-item { &:hover { background-color: aqua; } } `;