agustinrhcp / elm-mask / Mask

Simple libreary to mask strings and inputs.

Pattern


type Pattern

Represent the pattern that will be applied to the string to mask

Helpers

fromString : String -> Pattern

Creates a pattern from a String, using

to match digits and * for any character.

phonePattern : Pattern

phonePatter =
    Mask.fromString "(###)###-####"

Masking / Unmasking strings

mask : Pattern -> String -> String

Masks a string, useful for displaying formatted data.

maskPhone : String -> String
maskPhone phoneNumber =
    Mask.mask phonePattern phoneNumber

maskPhone "1231231234" == "(123)123-1234"

unMask : Pattern -> String -> String

Unmasks a string.

unmaskPhone : String -> String
unmaskPhone phoneNumber =
    Mask.unMask phonePattern phoneNumber

maskPhone "(123)123-1234" == "1231231234"

Input helpers

maskedValue : Pattern -> String -> Html.Attribute msg

Similar to Html.Attributes.value, but applying the provided pattern

input [ maskedValue phonePattern model.phoneNumber ] []

onMaskedInput : Pattern -> String -> (String -> msg) -> Html.Attribute msg

Similar to Html.Events.onInput, but unmasking a masked value. It requires the previous value as the second argument

type Msg = SetPhone String

input
    [ maskedValue phonePattern model.phoneNumber
    , onMaskedValue phonePattern model.phoneNumber SetPhoneNumber
    ]
    []