Showing a preview of content with "Show More" below header in React

user_14481067 0
Viewed 419

I'm trying to show content below a section header (the h5 below) as a preview by default, with only the first few lines of the content displaying. The text would then fade out, with a "Show More" at the bottom to expand onClick. This behavior is similar to Reddit on a desktop browser which shows a preview of the post body and fades out if the post is long on the feed (where a user could then click on the post to view it in full).

I tried implementing the react library react-show-more-text, but the text in the collapsed view doesn't contain any of the formatting that shows up in the same content when expanded (such as the h6 or u attributes). I'd like to maintain the formatting in the body content. It also doesn't fade to 0% opacity towards the bottom of the previewed content.

                <h5 className="mt-1 pt-3">Compensation</h5>
                <ShowMoreText
                  // lines={3}
                  more="Show more"
                  less="Show less"
                  expanded={false}
                  width={280}
                  className="text-sm pt-3 mx-3"
                >
                  <div>
                    <h6>
                      <u>Incentive Plans</u>
                    </h6>
                    <br />
                    <p className="text-sm">
                      An Annual Incentive Plan (AIP) is offered
                      <br />
                      <br />A Sales Incentive Plan (SIP) is offered
                    </p>
                  </div>
                  <div className="pt-4">
                    <h6 className="mb-4">
                      <u>Stock & Equity</u>
                    </h6>
                    <p className="text-sm">
                      <strong>New Hire Equity:</strong> Granted shortly
                      after hire date
                      <br />
                      <br />
                      <strong>Annual Equity:</strong> Granted once a year
                    </p>
                  </div>
                  <div className="pt-4">
                    <h6 className="mb-4">
                      <u>Employee Stock Purchase Plan (ESPP)</u>
                    </h6>
                    <p className="text-sm">
                      <strong>Contributions:</strong> Up to 15% of base
                      salary can be contributed
                      <br />
                      <br />
                      <strong>Discount:</strong> Stock is purchased at 15%
                      discount off the lower of the market value at the
                      beginning or the end of the offering period
                      <br />
                      <br />
                      <strong>Offering Periods:</strong> January 1 - June 15
                      and July 1 - December 15
                    </p>
                  </div>
                  <DropdownItem divider />
                </ShowMoreText>

Does anyone know of a react library that could accomplish this? Or how this could be coded?

expand next.js reactjs preview javascript
1 Answers

What about a pure css solution? You could leverage the text-overflow: ellipsis and white-space: normal properties together with an absolute positioned pseudo-element to create the effect you want. The css would look something like this:

.content {
  position: relative;
  max-height: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

Here is a small codepen demo.

user_74908710
Related