Package Exports

semantic-ui-react-countries

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (semantic-ui-react-countries) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

semantic-ui-react-countries

A simple tool for fetching and parsing ISO-3166-1 country data for use in Semantic UI React dropdown components. Data source: datahub.io.

Install

$ npm install -g semantic-ui-react-countries

Usage

Default

$ get-countries

Creates/overwrites file in current directory

./countriesData.js

export const COUNTRY_OPTIONS = [{"text":"Afghanistan","key":"AF","value":"AF","flag":"AF"},{"text":"Åland Islands","key":"AX","value":"AX","flag":"AX"},{"text":"Albania","key":"AL","value":"AL","flag":"AL"},{"text":"Algeria","key":"DZ","value":"DZ","flag":"DZ"},{"text":"American Samoa","key":"AS","value":"AS","flag":"AS"},{"text":"Andorra","key":"AD", ...

Flags

Const name (-n, --name)
Path and file name relative to current working directory (-p, --path)
Exclude flag attribute (--no-flags)

$ get-countries -n MY_COUNTRIES_DATA -p ./src/js/common/countries.js --no-flags

Creates/overwrites file in specified directory

./src/js/common/countries.js

export const MY_COUNTRIES_DATA = [{"text":"Afghanistan","key":"AF","value":"AF"},{"text":"Åland Islands","key":"AX","value":"AX"},{"text":"Albania","key":"AL","value":"AL"},{"text":"Algeria","key":"DZ","value":"DZ"},{"text":"American Samoa","key":"AS","value":"AS"},{"text":"Andorra","key":"AD","value":"AD"},{"text":"Angola","key":"AO", ...

Use it!

Simply import the const and use it in your semantic dropdown...

import { COUNTRY_OPTIONS } from './countriesData.js';

...

<Form>
  <Form.Field>
    <label htmlFor="country">Country</label>
    <Dropdown
      name="country"
      onChange={this.updateCountry}
      options={COUNTRY_OPTIONS}
      search
      selection
      selectOnBlur={false}
      value={this.state.country}
    />
  </Form.Field>
</Form>