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.

Click here for live demo

Installation

The package can be installed via NPM:

npm install react-region-flag-select --save

react-region-flag-select can be imported as follows

1var RegionSelect = require('react-region-flag-select');
2
3OR
4
5import RegionSelect from 'react-region-flag-select';
6

Usage

All country Codes Can Be Check Here: Country Codes

Default country, state, city select with flag and phone code

1    <RegionSelect />

Default props with handleChange method

1
2    handleChangeMethod=(data)=>{
3        console.log('Result',data);
4    }
5
6
7    <RegionSelect 
8     handleChange={this.handleChangeMethod}
9    />

Default props with handleChange method in React

1import React, {Component} from 'react';
2import RegionSelect from 'react-region-flag-select';
3 
4class App extends Component {
5 
6
7     handleChangeMethod=(data)=>{
8        console.log('Result',data);
9    }
10    render() {
11        return (
12              <RegionSelect 
13                handleChange={this.handleChangeMethod}
14             />  
15        );
16    }
17}
18 
19export default App;

For country, state, city select without flag

1    <RegionSelect 
2    isFlag={false} />

For country, state, city select without phone code

1    <RegionSelect 
2    isPhoneCode={false} />

For only country and state select

1    <RegionSelect 
2    isCity={false}/>

For only country and city select

1    <RegionSelect 
2    isState={false} />

For custom country and city select

1    <RegionSelect 
2    isState={false} 
3    countryCode={'IN'}/>

For only state(all states in world) and city select

1    <RegionSelect 
2    isCountry={false} />

For only state(Given country code states only) and city select

1    <RegionSelect 
2    isCountry={false} 
3    countryCode={'IN'}/>

For only country select

1    <RegionSelect 
2    countryOnly={true} />

For pre-selected only country select

1    <RegionSelect 
2    countryOnly={true}
3    selectedCountryCode={'IN'} />

For only state select

1    <RegionSelect 
2    stateOnly={true} />

For only custom country state(Given country code states only) select

1    <RegionSelect 
2    stateOnly={true}
3    countryCode={'IN'} />

For only city select

1    <RegionSelect 
2    cityOnly={true} />

For only custom country city(Given country code city only) select

1    <RegionSelect 
2    cityOnly={true}
3    countryCode={'IN'} />

For only custom country select

1    <RegionSelect 
2    customCountryOnly={true}
3    customCountryCode={['IN','AS','AU']}/>

For pre-selected only custom country select

1    <RegionSelect 
2    customCountryOnly={true}
3    customCountryCode={['IN','AS','AU']}
4    selectedCountryCode={'IN'} />

User will get these Output/data in handleChange method

1        {"countryData":
2                {
3                    "data": {
4                    "id": 101,"sortname":"IN","name":"India","phoneCode":91
5                }
6                },
7        "stateData":{
8                    "data": {
9                    "id": "10","name":"Delhi","country_id":"101"
10                }
11                },
12        "cityData":{
13                    "data": {
14                    "id": "707","name":"New Delhi","state_id":"10"
15                }
16                }
17                }

Default parameter options value

1    isFlag: true,
2    isPhoneCode: true,
3    customCountryCode: [],
4    countryCode: '',
5    stateOnly: false,
6    countryOnly: false,
7    cityOnly: false,
8    customCountryOnly: false,
9    isCity: true,
10    isState: true,
11    isCountry: true,
12    selectedCountryCode: ''

Available options list

1    isFlag: Boolean,
2    isPhoneCode: Boolean,
3    customCountryCode: [],
4    countryCode: String,
5    stateOnly: Boolean,
6    countryOnly: Boolean,
7    cityOnly: Boolean,
8    customCountryOnly: Boolean,
9    isCity: Boolean,
10    isState: Boolean,
11    isCountry: Boolean,
12    selectedCountryCode: String,
13    handleChange: Function

License

MIT Licensed. Copyright (c) Gaurav Tanwar 2019.