React-Select-Country Component :

Countries Selector component, useful in FORMS

Install :

npm install react-select-country --save-dev;

Get Selected Country :

• If you have :

  <Countries ref="cList" />

• You will retrieve the selected country by :

  this.refs.cList.selected;
  // OUTPUT example => Object{value:"GBR",name:"United Kingdom"}

• Known that :

• value is the ID of country which is the ISO-ALPHA-3 code of the country

.i.e: value="ALB" ,"BRA",...or "ZMB"

• name is the displayed name of country on the dropdown list.

i.e : name="Brazil","United State","Tunisia", "Saudi Arabia",...so on

Example of use :

import {Component} from 'react';
import Countries  from 'react-select-country';

class MyForm extends Component{
  constructor(props){
    super(props);
    this.onSelectCountry=this.onSelectCountry.bind(this);
  }
  onSelectCountry(event){
    this.state.selectedCountry={
         id:event.target.value,
         name:event.target.options[event.target.selectedIndex].text
    }
    //OR,if you assign "ref" to the component , ,
    this.state.selectedCountry=this.refs.country.selected; // {value,name}
  }
  render(){
    return(
      <form action="/">
        <div class="form-group">
            <label for="country">Country:</label>
            <Countries ref="country" name="country" empty=" -- Select country --" onChange={(e)=>this.onSelectCountry(e)} />
        </div>
        <div class="form-group">
            <input type="submit" value="Submit">
        </div>
      </form>

    )
  }
}

Props :

Download Props documetation

Notes :

"map" property has more priority than "filter", it means the filter will be done according to the result of "map" if it is used.

Accessibility :

If you find "props" above are not enough to customize more the component, "react-select-country" gives you the access to the "select" tag by a "ref" equals to "dom "

     componentDidMount(){
      var selectElement=this.refs.country.dom;//OR this.refs.country.refs.dom

      selectElement.appendChild(<option value="MCT">My Country</option>) ;
   }  
   render(){
     return <Countries ref="country" empty=" -- Select a country --" />
   }

History of releases :

• 0.0.15 STABLE:
  • add documentation .

  • 0.0.13 & 0.0.14 STABLE:

    • enhance README format.

  • 0.0.12 STABLE:

    • Enhancements : "map" and "filter" props.

  • 0.0.11 :

    • map feature to replace countries english name .

     //replace   countries english name by arabic name
     <Countries map={({value,name})=>arabic[value]} empty=" -- Select country --" />

    • filter feature to filter country before rendering the component.

     //Render ONLY countries which has a ISO-ALPHA-3 code starts with "T"
     <Countries filter={({value,name})=>value.startsWith('T')} empty=" -- Select country --" />

    • Enhance documentation (component.refs.dom and component.dom are the same).

  • 0.0.10 : Add history of releases on README

  • 0.0.9 :STABLE Add selected attribute to the component to be able to retrieve the selected option (its value and its inner-html).

    this.refs.country.selected
    //i.e : Object { value="SAU",  name="Saudi Arabia"}

  • FROM 0.0.4 TO 0.0.8: Enhancing documentation (README).

  • 0.0.3:STABLE First beta-release.

Note:

I mean by "STABLE" , Fully tested & if there are bugs in the previous releases must be fixed.

#license :

  Copyright (c) 2016 Abdennour TOUMI <http://abdennoor.com>

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.

TODO :

• i18n