When working with react-markdown, is it possible to create a "show more" or "see more" button?

[julillermo]

I'm considering transitioning the part of my website displaying plain text into react-markdown, but I think I'll have difficulty implementing a "show more" or "see more" feature.

I've previously made a react component that allows for a "show more" or "see more" interaction to expand or contract the text based on a specified number of lines (20 for example). My component visually works much like how react-clamp-lines does it here in their demo.

In my custom react component, I was getting the line count with the following function:

  function getLineCount(textElement: HTMLElement) {
    let lineCount = 0;
    if (textElement) {
      const lineHeight = parseInt(
        window.getComputedStyle(textElement).lineHeight,
      );
      const offsetHeight = textElement.offsetHeight;
      lineCount = offsetHeight / lineHeight;
    }
    return lineCount;
  }

When using react-markdown, considering that I will now have to pass the plain text as part of the <ReactMarkdown> component instead of my own component, would there still be a way to determine the line count and apply line clamping?

Alternatively, is there already a way to implement a "show more" or "see more" button for clamping the rendered text through <ReactMarkdown>?

[ChristianMurphy]

Welcome @julillermo 👋
Taking a step back, it sounds like you want the clamping to be height based on a screen?
react-markdown doesn't know that, that needs to happen after react-markdown and react have run so the layout engine can determine height.

Depending on you use case you could use pure CSS https://www.sitepoint.com/implementing-show-moreless-functionality-with-pure-css/
Or wrap the content is a show more/less component like https://www.npmjs.com/package/react-show-more-text