From bbf8b8c08112cf48f3124a6d28604fcddc01a9a8 Mon Sep 17 00:00:00 2001
From: Ankit Kumar <54987308+pseudoankit@users.noreply.github.com>
Date: Sat, 24 Feb 2024 20:29:13 +0530
Subject: [PATCH] Update README.md
---
README.md | 78 ++++++++++++++++++++++++++++++++++++-------------------
1 file changed, 51 insertions(+), 27 deletions(-)
diff --git a/README.md b/README.md
index 4207179..f6bb356 100644
--- a/README.md
+++ b/README.md
@@ -1,65 +1,89 @@
-# Jetpack Compose Coachmark/Onboarding Library
+# Compose Multiplatform Coachmark/Onboarding Library
[](https://maven-badges.herokuapp.com/maven-central/io.github.pseudoankit/coachmark)
-A lighweight library for creating coachmarks or onboarding flows using Jetpack Compose.
+A lightweight Compose multiplatform library dedicated to creating seamless onboarding experiences.
-
+| iOS | Android |
+|-|- |
-## Overview
+| Feature | Description |
+|----------------------------------|---------------------------------------------------------------------------------------------|
+| Custom Coachmarks | Easily create and customize coachmarks to guide users through your app. |
+| Flexible and Extensible | Customize coachmarks to match your app's design and extend functionality as needed. |
+| Cross-Platform Compatibility | Compatible with Android and iOS, ideal for multiplatform projects. |
+| Jetpack Compose Integration | Seamlessly integrate coachmarks with Jetpack Compose UI components. |
+| Dynamic Tooltip Views | Display tooltip views for each key when coachmarks are active, enhancing user guidance. |
+| Comprehensive Documentation | Access detailed documentation and support for easy implementation. |
-A lightweight jetpack compose library to create onboarding flow for your android app
-Now provide seamless onboarding experience to end users with just few lines of code
-## Features
+## Installation
-- Create custom coachmarks with ease.
-- Highly flexible and extensible.
-- Compatible with Jetpack Compose UI components.
-
-## Getting Started
-
-In your module's build.gradle
-
-[](https://maven-badges.herokuapp.com/maven-central/io.github.pseudoankit/coachmark)
+
+Android Project
+
+
In your module's gradle
+
```kotlin
dependencies {
- implementation 'io.github.pseudoankit:coachmark:'
+ implementation("io.github.pseudoankit:coachmark:")
+}
+```
+
+
+
+Compose Multiplatform Project
+
+
In your shared module gradle
+
+```kotlin
+kotlin {
+ sourceSets {
+ val commonMain by getting {
+ dependencies {
+ implementation("io.github.pseudoankit:coachmark:")
+ }
+ }
+ }
}
```
+
## Usage
-Define Keys for all coachmarks
+[Complete Demo Code](https://github.com/pseudoankit/coachmark/blob/master/coachmark/src/commonMain/kotlin/com/pseudoankit/coachmark/demo/UnifyCoachmarkDemo.kt)
+
+Define key for all composables that needs to be higlighted.
```kotlin
enum class Keys { Text1, Text2 }
```
-At root level make sure to wrap with UnifyCoachmark
+At the root level, ensure that your code is wrapped with UnifyCoachmark.
```kotlin
UnifyCoachmark(
tooltip = { /* Declare Tooltip Source code below ⏬ */ Tooltip(it) },
overlayEffect = DimOverlayEffect(Color.Black.copy(alpha = .5f)),
onOverlayClicked = { OverlayClickEvent.GoNext }
-) {
+) { this : CoachmarkScope
Content() // Source code below ⏬
}
```
-Enable coachmark for the required views with `enableCoachMark`, To access `enableCoachMark` you need to be inside `CoachmarkScope`
-If you are not in `CoachmarkScope` then get access to it via LocalCoachMarkScope.current
+Call the enableCoachMark method in all the composables that need to be highlighted.
+
This method can be invoked within the CoachmarkScope.
+
If you are not in the CoachmarkScope, you can access it by calling LocalCoachMarkScope.current.
```kotlin
@Composable
private fun Content() {
- with(LocalCoachMarkScope.current) { // not needed if you are already in `CoachmarkScope`
+ with(LocalCoachMarkScope.current) { // not needed if you are already in CoachmarkScope
Text(
text = "Will show tooltip 1",
modifier = Modifier
.enableCoachMark(
- key = Keys.Text1, // unique that we declared above
- toolTipPlacement = placement,
+ key = Keys.Text1, // unique key that we declared above
+ toolTipPlacement = ToolTipPlacement.Top,
highlightedViewConfig = HighlightedViewConfig(
shape = HighlightedViewConfig.Shape.Rect(12.dp),
padding = PaddingValues(8.dp)
@@ -70,7 +94,7 @@ private fun Content() {
}
```
-Define tooltip view (Tootip is showing when view is highlighted currently)
+Define a tooltip view for each key to be displayed when any coachmark is active or highlighted.
```kotlin
@Composable
private fun Tooltip(key: CoachMarkKey) {
@@ -91,7 +115,7 @@ private fun Tooltip(key: CoachMarkKey) {
```
-Inspired from reveal library
+Overlay Logic referred from reveal library
# License
```xml