TELPICK

Build Your Phone & Timezone Selectors Easily

Telpick for country and phone codes with IP detection. TelpickZone for IANA timezones with search by country, city or zone. React, Vue 3, Vanilla JS and CDN.

📦 npm Package Get Started ❤️ Donate
npm version GitHub stars License: MIT npm downloads

npm

Install with npm

npm install telpick

pnpm

Install with pnpm

pnpm add telpick

yarn

Install with yarn

yarn add telpick

CDN

Include from CDN

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

Interactive Demo

Click on the selector to try it. The component automatically detects your country by IP.

Code
Phone
Country
ISO

Meet TelpickZone

Search by country, city, or IANA timezone. Your browser timezone is selected automatically.

Timezone
Country
UTC offset

Installation and usage Telpick

After installing the package, import the CSS styles and the component according to your framework.

# Install the package
npm install telpick

# Import CSS styles (required)
import 'telpick/dist/style.css'

# Import component
import { TelpickReact } from 'telpick/react'
// 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'))

Installation and usage TelpickZone

Timezone selector with the same API style. Search by country, city, or IANA timezone.

# Install the package
npm install telpick

# Import CSS styles (required)
import 'telpick/dist/style.css'

# Import component
import { TelpickZoneReact } from 'telpick/zone/react'
// React Component
import React, { useState } from 'react'
import { TelpickZoneReact } from 'telpick/zone/react'
import 'telpick/dist/style.css'

function App() {
  const [selectedZone, setSelectedZone] = useState(null)

  return (
    <TelpickZoneReact
      timezone={null}
      onChange={(zone) => {
        console.log('Selected timezone:', zone)
        setSelectedZone(zone)
      }}
    />
  )
}
<!-- Vue 3 Component -->
<template>
  <TelpickZoneVue
    :timezone="selectedTimezone"
    @update:timezone="handleTimezoneChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { TelpickZoneVue } from 'telpick/zone/vue'
import 'telpick/dist/style.css'

const selectedTimezone = ref(null)

const handleTimezoneChange = (zone) => {
  console.log('Selected timezone:', zone)
  selectedTimezone.value = zone.id
}
</script>
<!-- HTML -->
<link rel="stylesheet" href="https://unpkg.com/telpick@latest/dist/style.css">
<div id="telpick-zone-container"></div>
<script src="https://unpkg.com/telpick@latest/dist/telpick-zone.umd.js"></script>

// JavaScript
const telpickZone = new TelpickZone({
  timezone: null,
  onChange: (zone) => {
    console.log('Selected timezone:', zone.id, zone.offset)
  }
})

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

Return value onChange

When the user selects a timezone, onChange (React/Vanilla) or @update:timezone (Vue) receives this object:

{
  id: "America/Lima",
  city: "Lima",
  country: "Perú",
  country_code: "PE",
  continent: "America",
  flag: "/flags/pe.webp",
  offset: "GMT-5"
}