README

Laravel Telephone Input component for Blade and Livewire based on the intl-tel-input JavaScript plugin.

DEMO PREVIEW

Simple Usage Demo

Country Sync Demo

Laravel Telephone Input

Installation

You can install the package via composer:

composer require victorybiz/laravel-tel-input

Directives

Place the @laravelTelInputStyles in the <head> section of your template before any of your other styles. Place the @laravelTelInputScripts directive in your template right before your closing </body> tag and after scripts from libraries like Livewire.

<html>
  <head>
    <!-- ... -->
    @laravelTelInputStyles
    <!-- ... -->
  </head>
<body>
    <!-- content -->

    @laravelTelInputScripts
</body>
</html>

Requirements

This package use the following packages.

International Telephone Input (https://github.com/jackocnr/intl-tel-input)
Laravel Livewire (https://laravel-livewire.com/) is required when using Livewire wire:model

Please make sure you install and include these dependencies before using this component.

Core Dependencies

This package uses intl-tel-input under the hood. For the dependency, we recommend you install them through npm or yarn, and then require them in your project's JavaScript. To install each of the dependencies this package makes use of, run this command in the terminal:

npm install intl-tel-input

Or Yarn:

yarn add intl-tel-input

Import JS

import intlTelInput from 'intl-tel-input';

window.intlTelInput = intlTelInput;

Import CSS:

@import 'intl-tel-input/build/css/intlTelInput.css';

If you’re using the compiled JavaScript, don’t forget to include the download or CDN versions of the dependencies before it. Please refer to the intl-tel-input readme for additional installation steps.

Utilities Script

Update your webpack.mix.js to copy the utils.js script to your public directory or publish the configuration file to set a custom path.

// webpack.mix.js
// ...
mix.copy('node_modules/intl-tel-input/build/js/utils.js', 'public/vendor/intl-tel-input/build/js');

Configuration

To customize the component, you should publish the configuration file using the vendor:publish Artisan command. The configuration file will be placed in your application's config directory:

# Publish the config file
php artisan vendor:publish --tag=laravel-tel-input:config

Please refer to the intl-tel-input readme for plugin options.

Usage

Basic usage

<x-tel-input
  id="phone"
  name="phone"
  class="form-input"
/>

Add hidden phone-country-input

<x-tel-input
  id="phone"
  name="phone"
  class="form-input"
  phone-country-input="#phone_country"
/>
<input type="hidden" id="phone_country" name="phone_country">

Usage with Livewire

<x-tel-input
  wire:model="phone"
  id="phone"
  name="phone"
  class="form-input"
/> 
<input wire:model="phone_country" type="hidden" id="phone_country" name="phone_country">

Sync tel-input wih a country dropdown

<div class="form-item">
  <label>Phone number</label>
  <x-tel-input
    id="phone"
    name="phone"
    class="form-input"
    phone-country-input="#address_country"
  />
</div>
<div class="form-item">
  <label>Address</label>
  <input type="text" placeholder="House name/number"><br>
  <input type="text" placeholder="City"><br>
  <input type="text" placeholder="State"><br>
  <input type="text" placeholder="Zip code"><br>
  <select id="address_country" name="address_country">
    <option value="CN">China</option>
    <option value="IN">India</option>
    <option value="NG">Nigeria</option>
    <option value="GB">United Kingdom</option>
    <option value="US">United States</option>
  </select>
</div>

Event Listener

input.addEventListener('telchange', function(e) {
    console.log(e.detail.valid); // Boolean: Validation status of the number
    console.log(e.detail.validNumber); // Returns internationally formatted number if number is valid and empty string if invalid
    console.log(e.detail.number); // Returns the user entered number, maybe auto-formatted internationally
    console.log(e.detail.country); // Returns the phone country iso2
    console.log(e.detail.countryName); // Returns the phone country name
    console.log(e.detail.dialCode); // Returns the dial code
});

Props / Attributes

Events

Troubleshooting

tel-input not rendering in Livewire after component update, refresh or change in DOM content.

The most common issues encountered by Livewire users has to do with Livewire's DOM diffing/patching system. This is the system that selectively updates elements that have been changed, added, or removed after every component update.

For the most part, this system is reliable, but there are certain cases where Livewire is unable to properly track changes. When this happens, hopefully, a helpful error will be thrown and you can debug with the following guide.

If a tel-input fails to render after component update like opening popup/modal with a tel-input or switch to tab section with a form containing a tel-input, to fix this, dispatch a telDOMChanged browser event in the action that triggers/opens the popup or form tab.
```
class ContactPage extends Component
{
    public $showQuickContactForm = false;

    public function toggleQuickContactForm()
    {
        $this->showQuickContactForm = !$this->showQuickContactForm;

        if ($this->showQuickContactForm) {
            $this->dispatchBrowserEvent('telDOMChanged');
        }
    }
    //...
}
```

Testing

composer test

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email lavictorybiz@gmail.com instead of using the issue tracker.

chapdel / laravel-tel-input

Maintainers

Details