ShowMore

A “Show More” component, when the content exceeds the set number of display lines, an expand button will appear to view more content.

Basic Usage

Use it like a normal component, just pass the long text as the children prop.

Advanced Usage

You can pass different props to achieve the display mode for different business scenarios.

Note: This package does not provide UI components that are not related to the core functions. You can refer to the sample code and implement it yourself with the UI framework components you are using, such as: Shadcn UI , Material UI , etc.

Custom buttons

If use custom React elements for the more / less props, you can bind the Ref value to the <ShowMore /> component, and receive the toggleLines method through ref.

With Dialog

In addition to replacing the UI of the button, you can also change its purpose. For example, the more button can be replaced with the ability to click to invoke a pop-up window or redirect to another page.

With Tooltip

This is an excellent use of #16! For cases where the original text is not very long, you can use components such as Tooltip to allow users to easily view the full content without having to manually click the expand button to view the full text.

Hover the mouse over the text to view the full text.

Type Declarations

This is the Props type of the component, inherits most of the Props from the Truncate component.

Please note: Props removed from TruncateProps by Omit are ignored and will not be passed to the <Truncate /> component.

import type React from 'react'
import { type TruncateProps } from '../Truncate'

export interface ShowMoreProps
  extends Omit<TruncateProps, 'width' | 'middle' | 'end' | 'ellipsis'> {
  /**
   * The label to display in the anchor element to show more
   *
   * If a valid React element is passed in,
   * the built-in anchor element will not be rendered,
   * and the React element will be rendered directly.
   * (checked by `React.isValidElement` ).
   *
   * @since v0.4.0 supported React element
   */
  more?: React.ReactNode

  /**
   * The label to display in the anchor element to show less
   *
   * If a valid React element is passed in,
   * the built-in anchor element will not be rendered,
   * and the React element will be rendered directly.
   * (checked by `React.isValidElement` ).
   *
   * @since v0.4.0 supported React element
   */
  less?: React.ReactNode

  /**
   * Class name(s) to add to the anchor elements,
   * only valid for built-in anchor element,
   */
  anchorClass?: string

  /**
   * This callback function will be triggered
   * when the component toggles the expanded/collapsed state.
   *
   * @param expanded - Current expand status
   *
   * @since v0.4.0
   */
  onToggle?: (expanded: boolean) => void
}

This component supports React’s reference forwarding.

/**
 * If use custom React elements, You can use the `toggleLines`
 * method to toggle between expand and collapse.
 * This is the type of this method.
 *
 * @since v0.4.0
 */
export type ShowMoreToggleLinesFn = (
  e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
) => void

/**
 * If use custom React elements for the `more` / `less` props,
 * you can bind the Ref value to the `<ShowMore />` component
 * and receive the `toggleLines` method through ref.
 *
 * @since v0.4.0
 */
export type ShowMoreRef = {
  toggleLines: ShowMoreToggleLinesFn
}

Live demo

Here is a basic example that could theoretically be suitable for any project. Adjust the slider to control how it displays in different situations.