https://github.com/henriquecbuss/elm-mask
Mask Strings to be used in Elm input fields
https://github.com/henriquecbuss/elm-mask
Last synced: 4 months 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 (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-19T19:18:25.000Z (over 2 years ago)
- Last Synced: 2024-12-31T03:42:07.334Z (6 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
[](https://github.com/henriquecbuss/elm-mask/actions?query=branch%3Amain) [](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!