3.0.0 • Published 5 years ago
@koterion/country_list v3.0.0
React Country List
country_list is a React Component for entering mobile numbers with code of choosing country.
Live demo
All examples on the demo page
Installing
npm install --save @koterion/country_listExamples
Flags image
.cntr-flag {
background-image: url('@koterion/country_list/dist/img/flags.png')
}Basic usage
import CountryList from '@koterion/country_list';
import '@koterion/country_list/dist/styles.css';
const phone = (<CountryList />);options
| option | type | default | desc |
|---|---|---|---|
| countryAll | array | [] | Array of countries iso |
| remove | boolean | false | If true remove countries using countryAll |
| list | boolean | false | If true create list of country using countryAll |
| flagInInput | boolean | false | If true add flags to current selector |
| flagInSelect | boolean | false | If true add flags to dropdown |
| geo | object | Use for checked country by ip | |
| closestForm | string | form | Closest form or selector |
| hasPhone | boolean | false | Using your custom phone input from inputPhoneName |
| inputCountryName | string | country | Name for input with country name (auto create type=hidden) |
| inputPhoneName | string | phone | Name for input with phone number |
| search | boolean | false | If true create input with name from inputCountryName, live search in country list |
| select | boolean | false | If true create list like select |
| required | boolean | false | If true add required for input |
| countries | json | Countries in json format |
countryAll
Use with delete or list
Example:
<CountryList delete countryAll={['ua', 'us']} />
<CountryList list countryAll={['ua', 'us']} />geo
For define country by ip we use service Sypexgeo
You can rewrite method, it option geo by default it's object with this parameters:
{
url: 'https://api.sypexgeo.net/',
getIso: response => response.country.iso
}url - api for service, getIso - return country iso
Also you can use current with current country in ISO format. Example:
<CountryList current='ua' />countries
Format for custom countries
{
"name": "Afghanistan",
"iso": "af",
"code": "93"
},
{
"name": "Albania",
"iso": "al",
"code": "355"
},