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