https://github.com/andregoncalves/stencil-countrylist
st-countrylist is a web component built with Stencil to generate a country list drop down (select) element.
https://github.com/andregoncalves/stencil-countrylist
countries country-picker jsx stencil webcomponents
Last synced: 3 months ago
JSON representation
st-countrylist is a web component built with Stencil to generate a country list drop down (select) element.
- Host: GitHub
- URL: https://github.com/andregoncalves/stencil-countrylist
- Owner: andregoncalves
- License: mit
- Created: 2018-02-21T22:36:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-21T12:04:05.000Z (almost 7 years ago)
- Last Synced: 2025-02-22T00:38:22.145Z (3 months ago)
- Topics: countries, country-picker, jsx, stencil, webcomponents
- Language: TypeScript
- Size: 94.7 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# st-countrylist
st-countrylist is a web component built with [Stencil](https://stenciljs.com/) 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:
```bash
git clone [email protected]:andregoncalves/stencil-countrylist.git
cd stencil-countrylist
git remote rm origin
```
and run:
```bash
npm install
npm start
```
## Using this component
### Script tag
- Put `` 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 `` 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
```js
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.
```js
element = document.querySelector('st-countrylist');
element.addEventListener('change', (e) => {
// e.target points to the select element
console.log(e.target);
})
```
## Example usage
```html
<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>
```