@matthew2097/intl-tel-material v1.0.7

intl-tel-material

component compatible with react.js, vue.js, vanilla.js and many others

Built with lit-element

Install

Before you start, please look at the DEMO project There are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using npm then we recommend using the npm package.

Script tag

• Put this script tag in the head of your index.html:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@matthew2097/intl-tel-material/docs/intl-tel-material.bundled.min.js"
></script>

NPM

• Run npm i @matthew2097/intl-tel-material
• import with import '@matthew2097/intl-tel-material'
• put this code in your project:

Then you can use the element <intl-tel></intl-tel> anywhere in your template, JSX, html etc. live demo: null

API

Properties

Example

<intl-tel id="phone" label="Phone number" value="+48600307428"></intl-tel>

Methods

Interactions with the methods requires a reference to the element itself, if using webcomponents or a library like Lit-Element or Fast-Element, this can be done easily within the if using the component from the browser

EventListener

const component = document.querySelector('intl-tel');

component.addEventListener('change', (e) => {
  console.log(e.detail);
});