hoverable

Modifier in Compose Foundation

Configure component to be hoverable via pointer enter/exit events.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.8.0-alpha01")
}

Overloads

@Stable
fun Modifier.hoverable(interactionSource: MutableInteractionSource, enabled: Boolean = true)

Parameters

name	description
interactionSource	[MutableInteractionSource] that will be used to emit [HoverInteraction.Enter] when this element is being hovered.
enabled	Controls the enabled state. When false, hover events will be ignored.

Code Example

HoverableSample

@Composable
fun HoverableSample() {
    // MutableInteractionSource to track changes of the component's interactions (like "hovered")
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()

    // the color will change depending on the presence of a hover
    Box(
        modifier =
            Modifier.size(128.dp)
                .background(if (isHovered) Color.Red else Color.Blue)
                .hoverable(interactionSource = interactionSource),
        contentAlignment = Alignment.Center
    ) {
        Text(if (isHovered) "Hovered" else "Unhovered")
    }
}