seymour

Customizable "See More" text for creating expandable and collapsible text components. Handles overflow with options for styling and inline or non-inline links.

#compose-multiplatform

Suggest an edit

Android JVMJVMKotlin/NativeWasmJS

GitHub stars21

Authorseygraber

Open issues3

LicenseMIT License

Creation date8 months ago

Last activity1 day ago

Latest release0.0.20 (8 months ago)

GitHub repository Wiki page

SeymourText ("See More Text")

A simple and customizable "See More" Text for Jetpack Compose. Effortlessly create expandable and collapsible material3 Text composables that handle overflow.

It supports all KMP targets that are supported by Compose Multiplatform.

Setup

repositories {
  mavenCentral()
}

dependencies {
  implementation("com.eygraber:seymour-text:0.0.20")
}

Snapshots can be found here.

Usage

Here are some examples of how to use SeymourText.

Inline - Basic Usage

Simple expandable text with default styling.

var isExpanded by remember { mutableStateOf(false) }

SeymourText(
  onSeeMoreChange = { isExpanded = it },
  isSeeMoreExpanded = isExpanded,
  text = "...",
  seeMoreText = "…see more",
  seeLessText = " See less",
  seeMoreMaxLines = 3,
  seeLessMaxLines = Int.MAX_VALUE,
)

Inline - Custom Styling

Text with custom see more/less link styling.

var isExpanded by remember { mutableStateOf(false) }

SeymourText(
  onSeeMoreChange = { isExpanded = it },
  isSeeMoreExpanded = isExpanded,
  text = "...",
  seeMoreText = "…see more",
  seeLessText = " See less",
  seeMoreMaxLines = 3,
  seeLessMaxLines = Int.MAX_VALUE,
  seeMoreStyle = SpanStyle(
    color = MaterialTheme.colorScheme.primary,
    fontWeight = FontWeight.Bold,
    fontSize = 14.sp,
  ),
  seeLessStyle = SpanStyle(
    color = MaterialTheme.colorScheme.secondary,
    fontWeight = FontWeight.Bold,
    fontSize = 14.sp,
  )
)

Inline Variant - Custom Text Style Expandable Only

Text with larger font size and different styling that can't be collapsed.

var isExpanded by remember { mutableStateOf(false) }

SeymourText(
  onSeeMoreChange = { if(it) isExpanded = it },
  isSeeMoreExpanded = isExpanded,
  text = "...",
  seeMoreText = "…see more",
  seeMoreMaxLines = 3,
  seeLessMaxLines = Int.MAX_VALUE,
  style = MaterialTheme.typography.bodyLarge.copy(
    fontSize = 16.sp,
    lineHeight = 24.sp,
  ),
  seeMoreStyle = SpanStyle(
    color = Color.Blue,
    fontWeight = FontWeight.Medium,
  )
)

Non-Inline Variant

Text with see more/less links outside of the text.

var isExpanded by remember { mutableStateOf(false) }

SeymourText(
  isSeeMoreExpanded = isExpanded,
  text = "...",
  seeMoreMaxLines = 3,
  seeLessMaxLines = Int.MAX_VALUE,
  seeMoreContent = {
    TextButton(
      onClick = { isExpanded = !isExpanded },
    ) {
      Text(
        text = if(isExpanded) "See less" else "…see more",
        style = MaterialTheme.typography.bodyMedium.copy(
          color = MaterialTheme.colorScheme.primary,
        ),
      )
    }
  },
)

Non-Inline Expandable Only Variant

Text with a see more link outside of the text that can't be collapsed.

var isExpanded by remember { mutableStateOf(false) }

SeymourText(
  isSeeMoreExpanded = isExpanded,
  text = "...",
  seeMoreMaxLines = 3,
  seeLessMaxLines = Int.MAX_VALUE,
  seeMoreContent = {
    if(!isExpanded) {
      TextButton(
        onClick = { isExpanded = !isExpanded },
      ) {
        Text(
          text = "…see more",
          style = MaterialTheme.typography.bodyMedium.copy(
            color = MaterialTheme.colorScheme.primary,
          ),
        )
      }
    }
  },
)