1- # Jetpack Compose Coachmark/Onboarding Library
1+ # Compose Multiplatform Coachmark/Onboarding Library
22
33[ ![ Maven Central] ( https://maven-badges.herokuapp.com/maven-central/io.github.pseudoankit/coachmark/badge.svg )] ( https://maven-badges.herokuapp.com/maven-central/io.github.pseudoankit/coachmark )
44<a href =" https://opensource.org/licenses/Apache-2.0 " ><img alt =" License " src =" https://img.shields.io/badge/License-Apache%202.0-blue.svg " /></a >
55
66
7- A lighweight library for creating coachmarks or onboarding flows using Jetpack Compose .
7+ A lightweight Compose multiplatform library dedicated to creating seamless onboarding experiences .
88
9- <img src =" https://github.com/pseudoankit/coachmark/assets/54987308/38c18ebb-5057-46f8-bdd8-6d9c966a603b " width =" 200 " height =" 400 " />
9+ | iOS | Android |
10+ | -| - |
1011
11- ## Overview
12+ | Feature | Description |
13+ | ----------------------------------| ---------------------------------------------------------------------------------------------|
14+ | Custom Coachmarks | Easily create and customize coachmarks to guide users through your app. |
15+ | Flexible and Extensible | Customize coachmarks to match your app's design and extend functionality as needed. |
16+ | Cross-Platform Compatibility | Compatible with Android and iOS, ideal for multiplatform projects. |
17+ | Jetpack Compose Integration | Seamlessly integrate coachmarks with Jetpack Compose UI components. |
18+ | Dynamic Tooltip Views | Display tooltip views for each key when coachmarks are active, enhancing user guidance. |
19+ | Comprehensive Documentation | Access detailed documentation and support for easy implementation. |
1220
13- A lightweight jetpack compose library to create onboarding flow for your android app
14- Now provide seamless onboarding experience to end users with just few lines of code
1521
16- ## Features
22+ ## Installation
1723
18- - Create custom coachmarks with ease.
19- - Highly flexible and extensible.
20- - Compatible with Jetpack Compose UI components.
21-
22- ## Getting Started
23-
24- In your module's build.gradle
25-
26- [ ![ Maven Central] ( https://maven-badges.herokuapp.com/maven-central/io.github.pseudoankit/coachmark/badge.svg )] ( https://maven-badges.herokuapp.com/maven-central/io.github.pseudoankit/coachmark )
24+ <details >
25+ <summary >Android Project</summary >
26+
27+ <br >In your module's gradle
28+
2729``` kotlin
2830dependencies {
29- implementation ' io.github.pseudoankit:coachmark:<latest_version🔝>'
31+ implementation(" io.github.pseudoankit:coachmark:<latest_version🔝>" )
32+ }
33+ ```
34+ </details >
35+
36+ <details >
37+ <summary >Compose Multiplatform Project</summary >
38+
39+ <br >In your shared module gradle
40+
41+ ``` kotlin
42+ kotlin {
43+ sourceSets {
44+ val commonMain by getting {
45+ dependencies {
46+ implementation(" io.github.pseudoankit:coachmark:<latest_version🔝>" )
47+ }
48+ }
49+ }
3050}
3151```
52+ </details >
3253
3354## Usage
3455
35- Define Keys for all coachmarks
56+ [ Complete Demo Code] ( https://github.com/pseudoankit/coachmark/blob/master/coachmark/src/commonMain/kotlin/com/pseudoankit/coachmark/demo/UnifyCoachmarkDemo.kt )
57+
58+ Define key for all composables that needs to be higlighted.
3659``` kotlin
3760enum class Keys { Text1 , Text2 }
3861```
3962
40- At root level make sure to wrap with UnifyCoachmark
63+ At the root level, ensure that your code is wrapped with UnifyCoachmark.
4164``` kotlin
4265UnifyCoachmark (
4366 tooltip = { /* Declare Tooltip Source code below ⏬ */ Tooltip (it) },
4467 overlayEffect = DimOverlayEffect (Color .Black .copy(alpha = .5f )),
4568 onOverlayClicked = { OverlayClickEvent .GoNext }
46- ) {
69+ ) { this : CoachmarkScope
4770 Content () // Source code below ⏬
4871}
4972```
5073
51- Enable coachmark for the required views with ` enableCoachMark ` , To access ` enableCoachMark ` you need to be inside ` CoachmarkScope `
52- If you are not in ` CoachmarkScope ` then get access to it via LocalCoachMarkScope.current
74+ Call the enableCoachMark method in all the composables that need to be highlighted.
75+ <br >This method can be invoked within the CoachmarkScope.
76+ <br >If you are not in the CoachmarkScope, you can access it by calling LocalCoachMarkScope.current.
5377``` kotlin
5478@Composable
5579private fun Content () {
56- with (LocalCoachMarkScope .current) { // not needed if you are already in ` CoachmarkScope`
80+ with (LocalCoachMarkScope .current) { // not needed if you are already in CoachmarkScope
5781 Text (
5882 text = " Will show tooltip 1" ,
5983 modifier = Modifier
6084 .enableCoachMark(
61- key = Keys .Text1 , // unique that we declared above
62- toolTipPlacement = placement ,
85+ key = Keys .Text1 , // unique key that we declared above
86+ toolTipPlacement = ToolTipPlacement . Top ,
6387 highlightedViewConfig = HighlightedViewConfig (
6488 shape = HighlightedViewConfig .Shape .Rect (12 .dp),
6589 padding = PaddingValues (8 .dp)
@@ -70,7 +94,7 @@ private fun Content() {
7094}
7195```
7296
73- Define tooltip view (Tootip is showing when view is highlighted currently)
97+ Define a tooltip view for each key to be displayed when any coachmark is active or highlighted.
7498``` kotlin
7599@Composable
76100private fun Tooltip (key : CoachMarkKey ) {
@@ -91,7 +115,7 @@ private fun Tooltip(key: CoachMarkKey) {
91115```
92116
93117
94- Inspired from <a href = " https://github.com/svenjacobs/reveal " >reveal</a > library
118+ Overlay Logic referred from <a href = " https://github.com/svenjacobs/reveal " >reveal</a > library
95119
96120# License
97121``` xml
0 commit comments