ChatContextMenu

1.0.3indexed

Arrow-shaped chat popovers with smart screen-edge positioning, modal barrier featuring anchor hole cutout, animated pivot transitions, configurable arrow/shape/spacing, and easy show/hide callbacks.

AndroidJSJVMNativeWasm·Matkurban/ChatContextMenu

0

Stars

—

Used by

dependents

—

Health

/ 100

English | 中文

ChatContextMenu

A Compose Multiplatform library that ports the chat_context_menu Flutter package. It provides an iOS-style chat context menu with arrow-shaped popovers, modal barriers, and smart screen-edge positioning.

Features

Supported Platforms

Platform	Target
Android	minSdk 24
iOS	Arm64, Simulator Arm64

Installation

Version Catalog (`gradle/libs.versions.toml`)

Add to your gradle/libs.versions.toml:

[versions]
chatcontextmenu = "1.0.1"

[libraries]
chatcontextmenu = { module = "io.github.matkurban:chatcontextmenu", version.ref = "chatcontextmenu" }

Then in build.gradle.kts:

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation(libs.chatcontextmenu)
        }
    }
}

Direct dependency

Alternatively, add the dependency directly to your commonMain source set:

// build.gradle.kts
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.matkurban:chatcontextmenu:1.0.1")
        }
    }
}

Import from io.github.matkurban.chatcontextmenu.ui.*.

Quick Start

Wrap your app in ChatContextMenuHost before using ChatContextMenuWrapper:

API Overview

Composables

Composable	Description

`ChatContextMenuWrapper` parameters

Extensions

API	Description
`Modifier.holeShape(Shape)`	Marks a modifier chain with the shape used for barrier hole cutout

Sample Apps

This repository includes demo apps for each platform:

Module

Run the samples:

./gradlew :androidApp:installDebug
./gradlew :desktopApp:run
./gradlew :webApp:wasmJsBrowserDevelopmentRun

Requirements

Kotlin 2.4.0+
Compose Multiplatform 1.11.1+
JDK 11+

Project Structure

library — published library (100% commonMain)
sample — demo UI (not published)
androidApp / desktopApp / webApp — sample apps

Related

Original Flutter package

License

This project is licensed under the MIT License.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import io.github.matkurban.chatcontextmenu.ui.ChatContextMenuHost
import io.github.matkurban.chatcontextmenu.ui.ChatContextMenuWrapper
import io.github.matkurban.chatcontextmenu.ui.holeShape

ChatContextMenuHost {
    ChatContextMenuWrapper(
        menuShape = RoundedCornerShape(10.dp),
        menuModifier = Modifier
            .background(MaterialTheme.colorScheme.surface, RoundedCornerShape(10.dp))
            .padding(8.dp),
        excludeAnchorFromBarrier = true,
        barrierColor = Color.Black.copy(alpha = 0.26f),
        barrierAnchorModifier = Modifier
            .padding(4.dp)
            .holeShape(RoundedCornerShape(8.dp)),
        widgetContent = { showMenu, hideMenu ->
            // bind showMenu to long-press / click on your anchor widget
        },
        menuContent = { hideMenu ->
            // menu items; call hideMenu() when an action is selected
        },
    )
}