https://github.com/mattheousdt/svelte-tel
No-frills headless telephone handling for Svelte
https://github.com/mattheousdt/svelte-tel
format formatting input phone-number runes svelte svelte-5 tel telephone
Last synced: 23 days ago
JSON representation
No-frills headless telephone handling for Svelte
- Host: GitHub
- URL: https://github.com/mattheousdt/svelte-tel
- Owner: MattheousDT
- License: mit
- Created: 2024-12-29T14:06:51.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-19T15:05:37.000Z (over 1 year ago)
- Last Synced: 2025-10-27T15:45:47.833Z (7 months ago)
- Topics: format, formatting, input, phone-number, runes, svelte, svelte-5, tel, telephone
- Language: TypeScript
- Homepage: https://mattheousdt.github.io/svelte-tel/
- Size: 106 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-tel
Simple headless phone number input handling for Svelte.
[](https://mattheousdt.github.io/svelte-tel/)
[](https://www.npmjs.com/package/svelte-tel)
> [!WARNING]
> This library is in alpha stages and may have breaking changes in the future.
>
> _(it definitely will)_
## Motivation and Goals
The library is fully headless, so you can use it however you want. All logic _should_ be handled by the library, and the UI to be handled by you. This way, you can have full control over the look and feel of your phone input. I also want to make it entirely based on Runes so you get the full power of Svelte.
Future things I'm considering:
- More options for the class.
- Pre-built components.
If you have any suggestions, feel free to open an issue and we can discuss it.
## Installation
```bash
npm install svelte-tel
```
## Usage
```svelte
import { Tel } from "svelte-tel";
// Initialize the class
const tel = new Tel();
Country Code: {tel.country}
Internationally formatted: {tel.value}
Nationally formatted: {tel.national}
Raw Phone Number: {tel.number}
Is Valid: {tel.valid}
Is Possible: {tel.possible}
```
🎉 That's literally it 🎉
## More complex example
Now you can use `tel` to do whatever you want.
Here's an example of how you might create a phone input with a country selector.
```svelte
import { Tel } from "svelte-tel";
import { getFlagEmoji } from "path-to-your-flag-emoji-function";
let input: HTMLInputElement;
const tel = new Tel({ defaultCountry: "GB" });
Phone number
{
// Focus the input when the country is selected
input?.focus();
}}
>
🌍️ Select a country
{#each tel.countries as country}
{getFlagEmoji(country.code)}
{country.name}
{/each}
```
Still need more examples? [Check out the demo website](https://mattheousdt.github.io/svelte-tel/)
## Options
```svelte
import { Tel } from "svelte-tel";
const tel = new Tel({
// Required if using national format
defaultCountry: "GB",
// The default value of the input
defaultValue: "447123456789",
// Language to use for translations
locale: "en",
// The format to use when formatting the phone number
format: "international";
// Whether to hide the country code prefix in the input
hideCallingCode: false;
// Whether the country code is editable when in international format
editableCountryCode: true;
// The countries to exclude from the countries list
excludeCountries: ["US"];
// The countries to include in the countries list
includeCountries: ["GB", "IE"];
});
```
## Contributing
I'm open to contributions, but I'm not sure how much more I want to add to this library. If you have a feature request, feel free to open an issue and we can discuss it. If you see a bug (most likely you will), please open an issue or a PR and I'll take a look.