Skip to content

Commit 556b626

Browse files
authored
Merge pull request #30 from pseudoankit/pseudoankit-patch-1
Update README.md
2 parents 5428061 + bbf8b8c commit 556b626

File tree

1 file changed

+51
-27
lines changed

1 file changed

+51
-27
lines changed

README.md

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,89 @@
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
2830
dependencies {
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
3760
enum 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
4265
UnifyCoachmark(
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
5579
private 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
76100
private 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

Comments
 (0)