How to compare the original text with truncated text

[AnnekaSillitoe]

We're using shiitake to display a show more/show less button. However this button shows regardless of whether something has been truncated.

Is there a way using react refs to access the original text and the new truncated text to compare length and determine if the show more button should be displayed or not?

<Fragment>
        {!displayFullNote && (
          <Shiitake id="truncated" className="d-block text-midgrey font-14" lines={1}>
          {text}
          </Shiitake>
          )}
        {displayFullNote && (
          <small id="non-truncated" className="d-block text-midgrey">{text}</small>
          )}
          <small
          id="display-fullnote"
          className="cursor-pointer border-0 text-primary bg-none d-block"
          onClick={() =>
          this.setState({
            displayFullNote: !displayFullNote
          })
        }
          >
          {displayFullNote ? "Show less" : "Show more"}
          </small>
      </Fragment>

[bsidelinger912]

Hi Anneka, this could be possible using a ref and poking around the DOM directly on a lifecycle hook in your component (maybe componentDidMount). I'm not exactly sure how that'd go without trying it myself. I'll keep this open and try it out when I have a sec to see if I can whip up an example.

[bsidelinger912]

Hi @AnnekaSillitoe I've got a release that allows you to pass a function to be called when the text is truncated or not: https://github.com/bsidelinger912/shiitake/releases/tag/v2.3.0.

[bsidelinger912]

Closing as this feature exists and was published a while ago.