hoverable

Compose Modifier

Common
fun Modifier.hoverable(interactionSource: MutableInteractionSource, enabled: Boolean = true) =
    this then if (enabled) HoverableElement(interactionSource) else Modifier

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

Parameters

interactionSourceMutableInteractionSource that will be used to emit HoverInteraction.Enter when this element is being hovered.
enabledControls the enabled state. When false, hover events will be ignored.

Code Examples

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")
    }
}