Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

readme.md

Built With Stencil

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 git@github.com: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>

About

st-countrylist is a web component built with Stencil to generate a country list drop down (select) element.

Topics

Resources

License

Packages

No packages published