Reaction Picker 💙

Reaction picker is a library project for Android using Jetpack compose, which brings the similar functionality of Facebook's most popular reaction picker.

👨🏻‍💻 Installation

Step 1: Add the JitPack repository to your build file

dependencyResolutionManagement {
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
      mavenCentral()
      maven { url = uri("https://jitpack.io") }
    }
}

Step 2: Add the dependency

dependencies {
  implementation("com.github.amsavarthan:reaction-picker:<latest_version>")
}

🤓 Basic Usage

You can checkout the implementation here.

Step 1: Wrap your App-level composable with ReactionPickerLayout

AppTheme {
  ReactionPickerLayout {
    Scaffold { padding ->
      //...
    }
  }
}

Step 2: Create a Reaction picker state using rememberReactionPickerState

Tip

Reaction class offers multiple overloads. Choose the appropriate one based on your specific usage requirements.

val items = listOf(
    Reaction(label = "Love", painterResource = R.drawable.love),
    Reaction(label = "Care", painterResource = R.drawable.care),
    Reaction(label = "Wow", painterResource = R.drawable.wow),
    Reaction(label = "Haha", painterResource = R.drawable.haha),
    Reaction(label = "Sad", painterResource = R.drawable.sad),
    Reaction(label = "Angry", painterResource = R.drawable.angry),
)

val state = rememberReactionPickerState(
    reactions = items,
    initialSelection = null,
)

Step 3: Include reactionPickerAnchor in the modifier chain of the composable that you wish to use as an anchor.

IconButton(
    modifier = modifier.reactionPickerAnchor(state),
    onClick = state::toggleReaction
) {
    if (state.selectedReaction != null) {
        Image(
            modifier = Modifier.size(32.dp),
            painter = painterResource(id = state.selectedReaction!!.painterResource!!),
            contentDescription = "react to post",
        )
    } else {
        Icon(
            modifier = Modifier.size(32.dp),
            imageVector = Icons.Rounded.FavoriteBorder,
            contentDescription = "react to post",
        )
    }
}

That's it. Just long press on the anchor for the beautiful reaction picker 🥳.

🎨 Customization

Note

Since this library is in its initial phase, I've only implemented basic customization features. Suggestions for new ideas are highly encouraged and welcome.

Custom reaction item:

The label and icon of a reaction are not restricted and can be freely utilized. For tailored customization of the label and icon, developers should leverage the icon and label slots provided by the ReactionPickerLayout.

ReactionPickerLayout(
  icon = { reaction ->  },
  label = { label -> }
){
  //..
}

Customizing the reaction box:

The shape, background color of the reaction box can be customized by passing the respective parameters available in ReactionPickerLayout

ReactionPickerLayout(
  containerColor = /*color*/, // Defaults to Color.Black
  containerShape = /*shape*/ // Defaults to CircleShape
){
  //..
}

Customizing item size on hover:

You can supply your custom ReactionPickerProperties to ReactionPickerLayout, specifying sizes for active (hovered), inactive (not currently hovered but something is), and idle states.

data class ReactionPickerProperties(
    val idleReactionSize: Dp = ReactionItemSize, // Defaults to 40.dp
    val activeReactionSize: Dp = ReactionItemSizeOnHover, // Defaults to 72.dp
    val inActiveReactionSize: Dp = ReactionItemSizeOnAnyHover,