https://github.com/mejdi14/kmp-liquid-search
https://github.com/mejdi14/kmp-liquid-search
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mejdi14/kmp-liquid-search
- Owner: mejdi14
- Created: 2025-03-05T12:33:28.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-03-07T10:45:27.000Z (7 months ago)
- Last Synced: 2025-03-07T11:28:51.390Z (7 months ago)
- Language: Kotlin
- Size: 264 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
KMP Liquid Search
## ✨ Demo
## :art: inspiration
This library was inspired by [Oleg Frolov](https://dribbble.com/shots/4605344-Search-icon-interaction) beautiful work.
## 🔨 Installation
Add this to your module's `build.gradle` file:
```gradle
dependencies {
...
implementation("io.github.mejdi14:KMP-Liquid-Search:0.2.3")}
```
## 🚀:Try it out:
Click [here](https://mejdi14.github.io/KMP-Liquid-Search/) to test the live version.
## :fire: How to Use
```kotlin
@Composable
fun SampleLiquidSearch() {
val isActive = remember { mutableStateOf(false) }
val controller = rememberLiquidSearchController()
val searchConfig = LiquidSearchConfig(
height = 60.dp,
backgroundColor = Color(0xFF6147ff),
cancelIconColor = Color.White,
searchIconColor = Color.White,
iconActiveColor = Color.Transparent,
iconInactiveColor = Color(0xFF6147ff),
liquidSearchActionListener = object : LiquidSearchActionListener() {
override fun onTextChange(text: String) {
// Handle text changes
}
override fun onCancelClicked() {
// Handle cancel action
}
override fun onSearchIconClick() {
// Handle search icon click
}
}
)
LiquidSearch(
modifier = Modifier.fillMaxWidth(),
liquidSearchConfig = searchConfig,
isChecked = isActive,
liquidSearchController = controller
)
}
```
## LiquidSearchConfig Properties
The `LiquidSearchConfig` class allows you to customize the appearance and behavior of the liquid search. Below is a table of its properties:
| Field | Type | Default Value | Description |
|------------------------------|----------------------------------|------------------------------------|---------------------------------------------------------------|
| `height` | `Dp` | `60.dp` | The height of the search bar. |
| `backgroundColor` | `Color` | `Color(0xFF6147ff)` | Background color of the search bar. |
| `cancelIconColor` | `Color` | `Color.White` | Color of the cancel (X) icon. |
| `searchIconColor` | `Color` | `Color.White` | Color of the search icon. |
| `iconActiveColor` | `Color` | `Color.Transparent` | Color when the search is active. |
| `iconInactiveColor` | `Color` | `Color(0xFF6147ff)` | Color when the search is inactive. |
| `searchIconAnimationDuration` | `Long` | `300` | Animation duration for the search icon. |
| `cancelIconSizeRatio` | `Int` | `5` | The size ratio for the cancel icon. |
| `clearSearchWhenUnFocus` | `Boolean` | `true` | Whether to clear search when it loses focus. |
| `liquidSearchActionListener` | `LiquidSearchActionListener` | `defaultLiquidSearchActionListener` | Listener for search interactions. |
## Use Custom Search Actions
You can provide custom behavior when a search action happens by overriding the `LiquidSearchActionListener`.
```kotlin
val searchConfig = LiquidSearchConfig(
height = 60.dp,
backgroundColor = Color(0xFF6147ff),
liquidSearchActionListener = object : LiquidSearchActionListener() {
override fun onTextChange(text: String) {
// Handle text changes
}
override fun onCancelClicked() {
// Handle cancel click
}
override fun onSearchIconClick() {
// Handle search icon click
}
}
)
```
## 🤝 Contributing
Contributions, issues and feature requests are welcome.
Feel free to check [issues page] if you want to contribute.
## Author
👤 **Mejdi Hafiane**
- profile: [@MejdiHafiane](https://twitter.com/mejdi141)
## Show your support
Please ⭐️ this repository if this project helped you!
## 📝 License
Copyright © 2019 [Mejdi Hafiane](https://github.com/mejdi14).
This project is [MIT](https://github.com/mejdi14/readme-md-generator/blob/master/LICENSE) licensed.