Telpick - Country and Phone Code Selector

          // React Component

          import React, { useState } from 'react'

          import { TelpickReact } from 'telpick/react'

          import 'telpick/dist/style.css'

          function App() {

            const [selectedCountry, setSelectedCountry] = useState(null)

            return (

              <TelpickReact

                code={null}

                onChange={(country) => {

                  console.log('Selected country:', country)

                  setSelectedCountry(country)

                }}

              />

            )

          }

          <!-- Vue 3 Component -->

          <template>

            <TelpickVue

              :code="selectedCode"

              @update:code="handleCountryChange"

            />

          </template>

          <script setup>

          import { ref } from 'vue'

          import { TelpickVue } from 'telpick/vue'

          import 'telpick/dist/style.css'

          const selectedCode = ref(null)

          const handleCountryChange = (country) => {

            console.log('Selected country:', country)

            selectedCode.value = country.country_code

          }

          </script>

          <!-- HTML -->

          <link rel="stylesheet" href="https://unpkg.com/telpick@latest/dist/style.css">

          <div id="telpick-container"></div>

          <script src="https://unpkg.com/telpick@latest/dist/telpick.umd.js"></script>

          // JavaScript

          const telpick = new Telpick({

            code: null,

            onChange: (country) => {

              console.log('Selected country:', country)

            }

          })

          telpick.init(document.getElementById('telpick-container'))

Build Your Phone Selector Easily

npm

pnpm

yarn

CDN

Interactive Demo

Installation and usage Telpick