Skip to content

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

License

Notifications You must be signed in to change notification settings

andregoncalves/stencil-countrylist

Repository files navigation

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

Stars

Watchers

Forks

Packages

No packages published