react-region-flag-select
Dynamic and custom react country, state, city select drop-down with flag and phone code options
A Node.js React package that gives dynamic and custom country, state, city select drop down with flag and phone code option. RegionSelect gives the max possible options to use country, state, city select dropdown with diffrent possible combinations of all with optional country flag and phone code options. RegionSelect can be used to show all country name list dropdown and also custom options of country name using its country code like 'IN' for india, 'AS' for American Samoa, 'AU' for australia etc.
Installation
The package can be installed via NPM:
npm install react-region-flag-select --save
react-region-flag-select can be imported as follows
var RegionSelect = ; OR ;
Usage
All country Codes Can Be Check Here: Country Codes
Default country, state, city select with flag and phone code
<RegionSelect />
Default props with handleChange method
{ console; } <RegionSelect handleChange=thishandleChangeMethod />
Default props with handleChange method in React
;; { console; } { return <RegionSelect handleChange=thishandleChangeMethod /> ; } ;
For country, state, city select without flag
<RegionSelect isFlag=false />
For country, state, city select without phone code
<RegionSelect isPhoneCode=false />
For only country and state select
<RegionSelect isCity=false/>
For only country and city select
<RegionSelect isState=false />
For custom country and city select
<RegionSelect isState=false countryCode='IN'/>
For only state(all states in world) and city select
<RegionSelect isCountry=false />
For only state(Given country code states only) and city select
<RegionSelect isCountry=false countryCode='IN'/>
For only country select
<RegionSelect countryOnly=true />
For pre-selected only country select
<RegionSelect countryOnly=true selectedCountryCode='IN' />
For only state select
<RegionSelect stateOnly=true />
For only custom country state(Given country code states only) select
<RegionSelect stateOnly=true countryCode='IN' />
For only city select
<RegionSelect cityOnly=true />
For only custom country city(Given country code city only) select
<RegionSelect cityOnly=true countryCode='IN' />
For only custom country select
<RegionSelect customCountryOnly=true customCountryCode='IN''AS''AU'/>
For pre-selected only custom country select
<RegionSelect customCountryOnly=true customCountryCode='IN''AS''AU' selectedCountryCode='IN' />
User will get these Output/data in handleChange method
"countryData": "data": "id": 101"sortname":"IN""name":"India""phoneCode":91 "stateData": "data": "id": "10""name":"Delhi""country_id":"101" "cityData": "data": "id": "707""name":"New Delhi""state_id":"10"
Default parameter options value
isFlag: true isPhoneCode: true customCountryCode: countryCode: '' stateOnly: false countryOnly: false cityOnly: false customCountryOnly: false isCity: true isState: true isCountry: true selectedCountryCode: ''
Available options list
isFlag: Boolean isPhoneCode: Boolean customCountryCode: countryCode: String stateOnly: Boolean countryOnly: Boolean cityOnly: Boolean customCountryOnly: Boolean isCity: Boolean isState: Boolean isCountry: Boolean selectedCountryCode: String handleChange: Function
License
MIT Licensed. Copyright (c) Gaurav Tanwar 2019.