LivePhone

A Phoenix LiveComponent for phone number input fields, inspired by intl-tel-input.

Based on ISO and ex_phone_number, which in turn is based on libphonenumber.

Installation

If available in Hex, the package can be installed by adding live_phone to your list of dependencies in mix.exs:

def deps do
  [
    {:live_phone, "~> 0.8"}
  ]
end

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/live_phone.

To your assets/package.json file add:

"live_phone": "file:../deps/live_phone",

To your app.js add something like:

import LivePhone from "live_phone"
let Hooks = {}
Hooks.LivePhone = LivePhone

And finally to your CSS add:

@import "../../deps/live_phone/assets/live_phone";

Usage

Usage is pretty simple, and there is an example Phoenix project included in the ./example directory of this repository.

<.live_component
  module={LivePhone}
  id="phone"
  form={:user}
  field={:phone}
  tabindex={0}
  preferred={["US", "CA"]} />

This will result in a form field with the name user[phone]. You can specify just the name manually if desired, but when you add the form option the name will be generated via Phoenix.HTML.Form.input_name/2. So this should behave like a regular input field.

With preferred you can set a list of countries that you believe should be on top always. The currently selected country will also be on top automatically.

Example

In the example/ directory you will find a minimal Phoenix application to demonstrate LivePhone in usage.

Browser Tests (chromedriver)

To run the browser tests you need to install chromedriver (brew install chromedriver on MacOS) and it has to be running already. The tests are excluded by default, but you can include them with --include browser. See below:

An "invalid session id" error can usually be fixed by upgrading chromedriver.

$ chromedriver --verbose --url-base=/wd/hub # hound assumes default port 9515)
$ mix test --include browser