https://github.com/henriquecbuss/elm-mask

Mask Strings to be used in Elm input fields
https://github.com/henriquecbuss/elm-mask

Last synced: 26 days ago
JSON representation

Mask Strings to be used in Elm input fields

• Host: GitHub
• URL: https://github.com/henriquecbuss/elm-mask
• Owner: henriquecbuss
• License: bsd-3-clause
• Created: 2021-08-28T00:31:27.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-19T19:18:25.000Z (over 2 years ago)
• Last Synced: 2024-11-08T06:52:36.930Z (3 months ago)
• Language: Elm
• Size: 27.3 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# henriquecbuss/elm-mask

[![Build Status](https://github.com/henriquecbuss/elm-mask/workflows/CI/badge.svg)](https://github.com/henriquecbuss/elm-mask/actions?query=branch%3Amain) [![Elm package](https://img.shields.io/elm-package/v/henriquecbuss/elm-mask.svg)](https://package.elm-lang.org/packages/henriquecbuss/elm-mask/latest/)

Mask `String`s to be used in input fields. Apply and remove masks so it's easy

to use in your update and view functions!

See an [example in action on Ellie](https://ellie-app.com/fjCBtqtVY8Ma1).

See more end-to-end example code in the `examples/` folder.

## Overview

```elm

Html.form []

    [ Html.input

        [ model.phoneNumber

            -- You can also apply the mask on your `update` function

            |> Mask.string { mask = "(##) #####-####", replace = '#' }

            |> Html.Attributes.value

        , Html.Events.onInput EnteredPhoneNumber

        ]

        []

    , Html.input

        [ model.price

            |> Mask.float (Mask.Precisely 2)

                { decimalSeparator = ",", thousandsSeparator = "." }

            |> Html.Attributes.value

        , Html.Events.onInput EnteredExampleFloatInput

        ]

        []

    ]

```

## Usage

Just apply a mask on your input's `value`, and remove the mask before storing

the value on your backend!

## Learning Resources

Feel free to ask for help on the [Elm Slack](https://elmlang.herokuapp.com/),

in a channel or DMing me @Henrique Buss, any feedback is also welcome! And if

you find any bugs, feel free to submit an issue!