0.1.0 • Published 6 years ago
react-form-countries-select v0.1.0
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-selectUsage
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 buildTest
yarn run test
npm run testLint
yarn run lint
npm run lintFlow
yarn run flow
npm run flowLicense
MIT
0.1.0
6 years ago