# ClickableText

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable [ClickableText](https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/ClickableText.composable#ClickableText(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Boolean,androidx.compose.ui.text.style.TextOverflow,kotlin.Int,kotlin.Function1,kotlin.Function1))( text: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/AnnotatedString, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, style: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextStyle, softWrap: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, overflow: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow, maxLines: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, onTextLayout: (https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextLayoutResult) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, onClick: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** Use Text or BasicText and pass an AnnotatedString that contains a LinkAnnotation. | Cmn |

## Functions

### ClickableText

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/text/ClickableText.kt+function:ClickableText)

```
@Composable
fun [ClickableText](https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/ClickableText.composable#ClickableText(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Boolean,androidx.compose.ui.text.style.TextOverflow,kotlin.Int,kotlin.Function1,kotlin.Function1))(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default,
    softWrap: Boolean = true,
    overflow: TextOverflow = TextOverflow.Clip,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    onClick: (Int) -> Unit
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> Use Text or BasicText and pass an AnnotatedString that contains a LinkAnnotation. Check LinkAnnotation's documentation for more details and samples.

A continent version of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/BasicText.composable#BasicText(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Function1,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,androidx.compose.ui.graphics.ColorProducer,androidx.compose.foundation.text.TextAutoSize)` component to be able to handle click event on the text.

This is a shorthand of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/BasicText.composable#BasicText(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Function1,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,androidx.compose.ui.graphics.ColorProducer,androidx.compose.foundation.text.TextAutoSize)` with `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1)` to be able to handle click event easily.

```kotlin
import androidx.compose.foundation.text.ClickableText
import androidx.compose.material3.Text
import androidx.compose.ui.text.AnnotatedString

ClickableText(
    text = AnnotatedString("Click Me"),
    onClick = { offset -> Log.d("ClickableText", "$offset -th character is clicked.") },
)
```

For other gestures, e.g. long press, dragging, follow sample code.

```kotlin
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.text.TextLayoutResult

val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
val gesture =
    Modifier.pointerInput(onLongClick) {
        detectTapGestures(
            onLongPress = { pos ->
                layoutResult.value?.let { layout ->
                    onLongClick(layout.getOffsetForPosition(pos))
                }
            }
        )
    }

Text(
    text = text,
    modifier = modifier.then(gesture),
    style = style,
    softWrap = softWrap,
    overflow = overflow,
    maxLines = maxLines,
    onTextLayout = {
        onTextLayout(it)
        layoutResult.value = it
    },
)
```

| Parameters |
|---|---|
| `text: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/AnnotatedString` | The text to be displayed. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to apply to this layout node. |
| `style: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextStyle = TextStyle.Default` | Style configuration for the text such as color, font, line height etc. |
| `softWrap: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/package-summary#ClickableText(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Boolean,androidx.compose.ui.text.style.TextOverflow,kotlin.Int,kotlin.Function1,kotlin.Function1)` is false, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/package-summary#ClickableText(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Boolean,androidx.compose.ui.text.style.TextOverflow,kotlin.Int,kotlin.Function1,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextAlign` may have unexpected effects. |
| `overflow: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow = TextOverflow.Clip` | How visual overflow should be handled. |
| `maxLines: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = Int.MAX_VALUE` | An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/package-summary#ClickableText(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Boolean,androidx.compose.ui.text.style.TextOverflow,kotlin.Int,kotlin.Function1,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/package-summary#ClickableText(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Boolean,androidx.compose.ui.text.style.TextOverflow,kotlin.Int,kotlin.Function1,kotlin.Function1)`. If it is not null, then it must be greater than zero. |
| `onTextLayout: (https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextLayoutResult) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = {}` | Callback that is executed when a new text layout is calculated. A `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextLayoutResult` object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text. |
| `onClick: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Callback that is executed when users click the text. This callback is called with clicked character's offset. Note: this composable is now deprecated. Instead, use regular `https://developer.android.com/reference/kotlin/androidx/compose/material3/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.foundation.text.TextAutoSize,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/BasicText.composable#BasicText(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Function1,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,androidx.compose.ui.graphics.ColorProducer,androidx.compose.foundation.text.TextAutoSize)` and pass an AnnotatedString that contains a `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/LinkAnnotation`. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/BasicText.composable#BasicText(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Function1,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,androidx.compose.ui.graphics.ColorProducer,androidx.compose.foundation.text.TextAutoSize)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/pointerInput.modifier#(androidx.compose.ui.Modifier).pointerInput(kotlin.coroutines.SuspendFunction1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.input.pointer.PointerInputScope).detectTapGestures(kotlin.Function1,kotlin.Function1,kotlin.coroutines.SuspendFunction2,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/LinkAnnotation` |   |