Add the Jitpack repository to your root build.gradle file. If you’re using the settings.gradle file, include it there.
repositories {
...
maven { url 'https://jitpack.io' }
}
Then add OhTeePee dependency to your module build.gradle file.
implementation "com.github.composeuisuite:ohteepee:$versionName"First of all, create a basic composable then start to build on it.
@Composable
fun OtpInput() {
// a mutable state to handle OTP value changes…
var otpValue: String by remember { mutableStateOf("") }
// this config will be used for each cell
val defaultCellConfig = OhTeePeeCellConfiguration.withDefaults(
borderColor = Color.LightGray,
borderWidth = 1.dp,
shape = RoundedCornerShape(16.dp),
textStyle = TextStyle(
color = Color.Black
)
)
OhTeePeeInput(
value = otpValue,
onValueChange = { newValue, isValid ->
otpValue = newValue
},
configurations = OhTeePeeConfigurations.withDefaults(
cellsCount = 6,
emptyCellConfig = defaultCellConfig,
cellModifier = Modifier
.padding(horizontal = 4.dp)
.size(48.dp),
),
)
}To customize it further, you can use config parameters such as filledCellConfig, activeCellConfig, errorCellConfig and errorAnimationConfig to create different UI behaviour for different situations.
@Composable
fun OtpInput() {
...
OhTeePeeInput(
...
configurations = OhTeePeeConfigurations.withDefaults(
...,
emptyCellConfig = defaultCellConfig,
filledCellConfig = defaultCellConfig,
activeCellConfig = defaultCellConfig.copy(
borderColor = Color.Blue,
borderWidth = 2.dp
),
errorCellConfig = defaultCellConfig.copy(
borderColor = Color.Red,
borderWidth = 2.dp
),
errorAnimationConfig = null, // default is OhTeePeeErrorAnimationConfig.Shake(),
placeHolder = "-", // a place holder (great comment isn't it)
),
)
}This is just the tip of the iceberg when it comes to customization of OhTeePee libray. If you want to see more, definitely check out this amazing article written by co-author Ilyas Ipek
- Read OTP Code directly from SMS
- Add animations
- Write UI tests
Ilyas Ipek
- Medium: @ilyasipek
- Github: @ilyasipek
- LinkedIn: @ilyas-ipek
Tarik Yasar
- Medium: @tyasar
- Github: @tarikyasar
- LinkedIn: @tarik-yasar
We are always open to new ideas! To contribute, please check following steps:
- Open an issue first to discuss what you would like to change.
- Fork the Project
- Create your feature branch (
git checkout -b feature/new_feature) - Format code using Ktlint (
./gradlew ktlintFormat) - Commit your changes (
git commit -m 'Add some new feature') - Push to the branch (
git push origin feature/new_feature) - Open a pull request
⭐️ Give us a star if this project helped you! ⭐️
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent