react-form-countries-select

A React select component that displays contains countries and fires a callback when a new one is selected.

Installation

yarn add react-form-countries-select
 
- or -
 
npm install react-form-countries-select

Usage

1 . Require react-form-countries-select after installation

import CountriesSelect from "react-form-countries-select";

2 . Include react-form-countries-select component

onCountrySelect = (event, country) => {
    // event {SyntheticEvent<HTMLSelectElement>} - React HTML event
    // country {Object} - Object representing the state
    // country.name {string} - The full name of the selected country
    // country.abbreviation {string} - The two character country code
}
 
<CountriesSelect onChange={this.onCountrySelect} />

Parameters

Parameter	Type	Description
onChange	function	Callback with the selected country. Parameters are the HTML event and an object with the format { name: 'United States', abbreviation: 'US' }
defaultOptionText	string	The label to display for the default/unselected option. A user selecting this option will not fire the callback. (default: "Select a country ...")
hasDefaultOption	boolean	Toggle the default option on or off (default: true)
valueTemplate	string	A template to customize how the label in the drop down is displayed. [NAME] will display the full country name. [CODE] will display the two character country code. (default: [NAME]). These can be used in combination. ie. "([CODE]) - [NAME]" which will display "(US) - United States"
style	Object	Javascript object with camelCased CSS properties rather than a CSS string. Standard React styles
className	string	A CSS class name. The presence of this attribute will override all default styles. So it's all or none

Build

yarn run build
npm run build

Test

yarn run test
npm run test

Lint

yarn run lint
npm run lint

Flow

yarn run flow
npm run flow

License

MIT