abadi199 / intl-phone-input / IntlPhoneInput

Phone number input with built in international dial code selector.

View

input : Config msg -> State -> Type.PhoneNumber -> Html msg

Render the Intl Phone Input element as part of your view function.

type alias model =
    { phoneNumberstate : IntlPhoneInput.State
    , phoneNumber : IntlPhoneInput.Type.PhoneNumber
    }

type Msg
    = PhoneNumberChanged IntlPhoneInput.State PhoneNumber (Cmd Msg)

view : Model -> Html Msg
view model =
    IntlPhoneInput.input
        (IntlPhoneInput.Config.defaultConfig PhoneNumberChanged)
        model.phoneNumberstate
        model.phoneNumber

customInput : List (Html.Styled.Attribute msg) -> Config msg -> State -> Type.PhoneNumber -> Html msg

Render the Intl Phone Input element as part of your view function with some custom attributes to the phone number field.

type alias model =
    { phoneNumberstate : IntlPhoneInput.State
    , phoneNumber : IntlPhoneInput.Type.PhoneNumber
    }

type Msg
    = PhoneNumberChanged IntlPhoneInput.State PhoneNumber (Cmd Msg)

view : Model -> Html Msg
view model =
    IntlPhoneInput.input
        [ Html.Attributes.class "MyPhoneInput" ]
        (IntlPhoneInput.Config.defaultConfig PhoneNumberChanged)
        model.phoneNumberstate
        model.phoneNumber

inputStyled : Config msg -> State -> Type.PhoneNumber -> Html.Styled.Html msg

Elm CSS version of input function. Use this if you use Elm CSS on your project to avoid the style tag being rendered to early.

customInputStyled : List (Html.Styled.Attribute msg) -> Config msg -> State -> Type.PhoneNumber -> Html.Styled.Html msg

Elm CSS version of input function. Use this if you use Elm CSS on your project to avoid the style tag being rendered to early.

Internal


type alias State =
Internal.State

Internal state of the Intl Phone Input element.

initialState : State

The initial state of the Intl Phone Input element