compose-input-mask

0.1.7indexed

Solves input-mask challenges in compose projects, offering customizable visual transformations for text fields. Supports placeholders, text styling, and demonstrates use with date formatting.

AndroidJSJVMNative·3moly/compose-input-mask

Stars

—

Used by

dependents

—

Health

/ 100

input-mask library for compose multiplatform

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.

features

placeholder
styling text

install

allprojects {
  repositories {
    mavenCentral()
  }
}

dependencies {
    implementation("io.github.3moly:compose-input-mask:x.x.x")
}

how to use

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 = '/'
)

current restrictions

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)
},

placeholder

val visualTransformation = universalTransformation(
    mask = "dd/mm/yyyy",
    maskCharToKeep = '/',
    placeholder = "date's placeholder"
)

styling text

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
)