Solves input-mask challenges in compose projects, offering customizable visual transformations for text fields. Supports placeholders, text styling, and demonstrates use with date formatting.
This is a small project to bring a few functions that solve an input-mask problem in compose. There is already added one implementation for demo in compose: PasswordVisualTransformation, but this is not enough. If you already knew what it costs to bring your own mask for your compose-project, this project can help you.
support targets: android, ios, desktop and js.
allprojects {
repositories {
mavenCentral()
}
}
dependencies {
implementation("io.github.3moly:compose-input-mask:x.x.x")
}Here is example of using TextFields in Jetpack Compose. And the one missing part is visualTransformation parameter.
val textFieldState = remember { mutableStateOf(TextFieldValue("")) }
OutlinedTextField(
value = textFieldState.value,
onValueChange = { newValue ->
textFieldState.value = newValue
},
visualTransformation = visualTransformation,
singleLine = true
)Let's write a mask for date like this "dd/mm/yyyy".
val visualTransformation = universalTransformation(
mask = "dd/mm/yyyy",
maskCharToKeep = '/'
)| input | display result | raw value in return (newValue ->) |
|---|---|---|
| 11 | 11/mm/yyyy | 11 |
| 11012001 | 11/01/2001 | 11012001 |
| 112233334 | 11/22/3333 | 112233334 |
| my_birthday | my/_b/irth | my_birthday |
Because we use compose class VisualTransformation, there is no chance to change the raw value. In a 1.x.x version you need to filter text (ex: for only numbers or for length size) on your own before passing text to OutlinedTextField or other @Composable text fields.
//here is date's onValueChange. Max length of text: 8, only digits.
onValueChange = { newValue ->
val filteredText = newValue.text.filter { d -> d.isDigit() }.take(8)
textFieldState.value = newValue.copy(text = filteredText)
},val visualTransformation = universalTransformation(
mask = "dd/mm/yyyy",
maskCharToKeep = '/',
placeholder = "date's placeholder"
)Here is a class for passing him in a parameter of universalTransformation:
@Stable
data class MaskStyle(
val placeholderColor: Color,
val beforeCursorColor: Color,
val afterCursorColor: Color
) {
companion object {
val Default = MaskStyle(
placeholderColor = Color.Gray,
beforeCursorColor = Color.Black,
afterCursorColor = Color.Gray
)
}
}If we pass the object of MaskStyle like this:
placeholder = "date's placeholder",
style = MaskStyle(
placeholderColor = Color.Magenta,
beforeCursorColor = Color.Green,
afterCursorColor = Color.Red
)
This is a small project to bring a few functions that solve an input-mask problem in compose. There is already added one implementation for demo in compose: PasswordVisualTransformation, but this is not enough. If you already knew what it costs to bring your own mask for your compose-project, this project can help you.
support targets: android, ios, desktop and js.
allprojects {
repositories {
mavenCentral()
}
}
dependencies {
implementation("io.github.3moly:compose-input-mask:x.x.x")
}Here is example of using TextFields in Jetpack Compose. And the one missing part is visualTransformation parameter.
val textFieldState = remember { mutableStateOf(TextFieldValue("")) }
OutlinedTextField(
value = textFieldState.value,
onValueChange = { newValue ->
textFieldState.value = newValue
},
visualTransformation = visualTransformation,
singleLine = true
)Let's write a mask for date like this "dd/mm/yyyy".
val visualTransformation = universalTransformation(
mask = "dd/mm/yyyy",
maskCharToKeep = '/'
)| input | display result | raw value in return (newValue ->) |
|---|---|---|
| 11 | 11/mm/yyyy | 11 |
| 11012001 | 11/01/2001 | 11012001 |
| 112233334 | 11/22/3333 | 112233334 |
| my_birthday | my/_b/irth | my_birthday |
Because we use compose class VisualTransformation, there is no chance to change the raw value. In a 1.x.x version you need to filter text (ex: for only numbers or for length size) on your own before passing text to OutlinedTextField or other @Composable text fields.
//here is date's onValueChange. Max length of text: 8, only digits.
onValueChange = { newValue ->
val filteredText = newValue.text.filter { d -> d.isDigit() }.take(8)
textFieldState.value = newValue.copy(text = filteredText)
},val visualTransformation = universalTransformation(
mask = "dd/mm/yyyy",
maskCharToKeep = '/',
placeholder = "date's placeholder"
)Here is a class for passing him in a parameter of universalTransformation:
@Stable
data class MaskStyle(
val placeholderColor: Color,
val beforeCursorColor: Color,
val afterCursorColor: Color
) {
companion object {
val Default = MaskStyle(
placeholderColor = Color.Gray,
beforeCursorColor = Color.Black,
afterCursorColor = Color.Gray
)
}
}If we pass the object of MaskStyle like this:
placeholder = "date's placeholder",
style = MaskStyle(
placeholderColor = Color.Magenta,
beforeCursorColor = Color.Green,
afterCursorColor = Color.Red
)