st-countrylist

st-countrylist is a web component built with Stencil to add a select/dropdown list of countries and their respective ISO country codes (ISO-3166-1 - Alpha 2 Codes).

Demo

Getting Started

To try this component:

git clone [email protected]:andregoncalves/stencil-countrylist.git
cd stencil-countrylist
git remote rm origin

and run:

npm install
npm start

Using this component

Script tag

• Put <script src='https://unpkg.com/stencil-countrylist@latest/dist/countrylist.js'></script> in the head of your index.html
• Then you can use the component

Node Modules

• Run npm install stencil-countrylist --save
• Put a script tag similar to this <script src='node_modules/stencil-countrylist/dist/countrylist.js></script> in the head of your index.html
• Then you can use the element <st-countrylist> anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install stencil-countrylist --save
• Add this import to your root component or root module: import 'stencil-countrylist';
• Then you can use the element <st-countrylist> anywhere in your template, JSX, html etc

Parameters

Attribute | Default | Description ------------ | ------------- | ------------- selected | '' | The selected country, either a country name or ISO code highlighted | '' | A comma separeated list of countries to show at the top of the list

Events

The st-countrylist element emits a countryChange event whenever the selected value changes

element = document.querySelector('st-countrylist');
element.addEventListener('countryChange', (e) => {
  // Country code
  console.log(e.detail.code);
  // Country name
  console.log(e.detail.name);
})

You can also listen to the normal select change event that will bubble up.

element = document.querySelector('st-countrylist');
element.addEventListener('change', (e) => {
  // e.target points to the select element
  console.log(e.target);
})

Example usage

<st-countrylist name="country1" highlighted="PT,DE,Hungary" class="my-class"></st-countrylist>
<st-countrylist name="country2" selected="DE"></st-countrylist>
<st-countrylist name="country3" selected="Germany"></st-countrylist>