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;
}
}
`;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent