English | 简体中文

NOTE: The artifact id is hooks2

implementation("xyz.junerver.compose:hooks2:<latest_release>")

Currently only limited targets are supported:

• android
• desktop (jvm)
• iosarm64
• iosimulatorarm64
• iosx64

The idea for the project comes from alibaba/hooks, which is a very easy-to-use collection of React Hooks.

It encapsulates most common operations as custom hooks, and useRequest is the top priority. It is designed to be very lightweight, highly configurable, and easy to use.

Therefore, based on this design idea, Hooks that can be used in the Compose project were created using similar API names.

The hooks that have been implemented so far are as follows:

Note: All use functions also have the signature of remember. If you prefer Compose’s naming method, just use rememberXxx!

Functions marked with * can only be used on Android

A separate AI module providing hooks for AI chat completions and structured data generation with OpenAI-compatible APIs and Anthropic Messages API.

Add AI module dependency:

implementation("xyz.junerver.compose:ai:<latest_release>")

Features:

• Streaming responses (SSE) with real-time typewriter effect
• Non-streaming mode support (stream = false)
• Multimodal input support (text, images, files)
• Structured data generation with type safety
• Message state management
• Loading and error states
• Control functions (send, stop, reload)
• Configurable options (temperature, maxTokens, timeout, etc.)
• Lifecycle callbacks (onFinish, onError, onStream)

Example - Chat:

val (messages, isLoading, error, sendMessage, _, _, reload, stop) = useChat{provider =Providers.OpenAI(apiKey ="your-api-key") model ="gpt-3.5-turbo" systemPrompt ="You are a helpful assistant." onFinish ={message, usage, reason ->println("Completed: ${message.content}") } } // Send a message sendMessage("Hello!") // Display messages with streaming effect messages.value.forEach{message ->Text("${message.role}: ${message.content}") }

Example - Generate Object:

@Serializable data classRecipe(valname:String, valingredients:List<String>) val (recipe, rawJson, isLoading, error, submit, stop) = useGenerateObject<Recipe>( schema =Recipe::class.jsonSchemaString, ){provider =Providers.OpenAI(apiKey ="your-api-key") systemPrompt ="You are a professional chef." } // Generate structured data submit("Generate a pasta recipe") // Use the result recipe.value?.let{r ->Text("Recipe: ${r.name}") r.ingredients.forEach{Text("- $it") } }

KMP project

// groovy implementation 'xyz.junerver.compose:hooks2:<latest_release>' // kotlin implementation("xyz.junerver.compose:hooks2:<latest_release>") 

Use hooks2 In Android

For pure Android projects, please use the following dependencies（Artifact id：hooks2-android）：

implementation("xyz.junerver.compose:hooks2-android:<latest_release>")

If used in ComposeMultiplatform, use artifact id: hooks2

Old version hooks continue to support

If your project does not have performance issues due to recompose , you can continue to use the old version in the Android project, and the bugfix will be synchronized to the old version in subsequent development.

implementation("xyz.junerver.compose:hooks:2.0.3")

1. Use useGetState to quickly create controlled components

   val (name, setName, getName) = useGetState("") OutlinedTextField( value = getName(), // or `name.value` onValueChange = setName, label ={Text("Input Name") } )

2. Use useEffect to perform component LaunchedEffects

3. Use useRef to create object references that are not affected by component recompose

   val countRef = useRef(0) // or `val countRef by useRef(0)`Button(onClick ={countRef.current +=1// or `countRef += 1`println(countRef) }){Text(text ="Ref= ${countRef.current}") // or `countRef` }

4. Use useRequest to easily manage network query state

   val (dataState, loadingState, errorState, run) = useRequest( requestFn =WebService::login.asRequestFn(), //Encapsulate the corresponding extension functions yourself,to make retrofit friendly optionsOf ={manual =true } ) val data by dataState // obtained `value` through delegateval loading by loadingState val error by errorState if (loading){Text(text ="loading ....") } if (data !=null){Text(text ="resp: $data") } if (error !=null){Text(text ="error: $error") } Button(onClick ={run(arrayOf(requestBody)) }){Text(text ="Login") }

   useRequest organizes code through a plug-in pattern, the core code is extremely simple, and can be easily extended for more advanced features. Current features include:

   • Automatic/manual request
   • Polling
   • Debounce
   • Throttle
   • Error retry
   • Loading delay
   • SWR(stale-while-revalidate)
   • Caching

For more usage, please refer to wiki and examples

Copy hooks in the Live Templates directory File, paste into C:\Users\<user-name>\AppData\Roaming\Google\AndroidStudio2023.2\templates\

You can easily create code snippets of useState and useRequest through us and ur.

For hooks like useRequest, its return value can deconstruct many objects and functions. It is necessary to enable InlayHint:

Editor - Inlay Hints - Types - Kotlin

If you are using ProGuard you might need to add the following option:

-keep class xyz.junerver.composehooks.**{*} -keepclassmembers class xyz.junerver.composehooks.**{*} -dontwarn xyz.junerver.composehooks.** 

• Easily manage network requests with useRequest
• Using state hoisting in Compose? I'll hoisting to Provider
• How does a parent component call the function of a child component in Compose?
• How to use MVI idea conveniently in Compose? Try useReducer!
• Easily manage global state in Compose like using redux
• Easily use asynchronous dispatch to manage global state in Compose
• Managing network requests in Compose is so easy!
• Use debounce and throttle elegantly in Jetpack Compose

• KMP friendly
• CI
• Unit Test
• Complete documentation

1. alibaba/hooks
2. pavi2410/useCompose
3. vueuse/vueuse

Contributing guidelines

Apache License 2.0