Code Monkey home page Code Monkey logo

compose-validation's Introduction

Compose Validation

Installation

settings.gradle.kts

    dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { setUrl("https://jitpack.io") }
    }
}

build.gradle.kts

dependencies {
    implementation("com.github.TomTruyen:Compose-Validation:<version>")
}

Usage

UIState

data class MyUIState(
    // This is the value of the input
    val requiredInput: String? = null,
    
    // This is the last result of the validation and will be used to display a possible error state
    var requiredInputValidationResult: MutableState<ValidationResult?> = mutableStateOf(null)
) {
    // This is a validator with the rules on which you want to validate
    private val validator = TextValidator.withRules(RequiredRule()) // Takes a vararg of rules so you can add as many as you want
    
    // This is a method that will be called in the LaunchEffect of the composable when the dependency changes (in this case "requiredInput") 
    // Has to be called in the LaunchedEffect, since we need the context to validate the input
    fun validateRequiredInput(context: Context) {
        if(requiredInput == null) return // If the input is null, we don't want to validate it
        
        // Perform the validation and update the result
        // .value is used to update the MutableState
        requiredInputValidationResult.value = validator.validate(context, requiredInput)
    } 
}

Composable

Handle validating the inputs

val context = LocalContext.current

LaunchedEffect(uiState.requiredInput) {
    uiState.validateRequiredInput(context)
}

Displaying the errorMessage (e.g.: in a TextField)

MyTextField(
    error = uiState.requiredInputValidationResult.errorMessage() // Will be your error message if the validation fails
)

Validating all inputs (e.g: for a button enabled state)

val areInputsValid by remember {
    derivedStateOf {
        uiState.requiredInputValidationResult.isValid() == true
        // More validation checks can be added
        // e.g.: && uiState.otherInputValidationResult?.isValid() == true && ...
    }
}

Button(
    enabled = areInputsValid
)

Building your own validation rules

class MyCustomRule(
    override val errorMessage: (context: Context) -> String = { context -> context.getString(R.string.error_message) }
): TextValidationRule {
    override val validationRule: (String) -> Boolean = { 
        // Your validation logic
        // e.g.: input.length > 5
        
        // Return true if the input is valid
    }   
}

compose-validation's People

Contributors

tomtruyen avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.