ReadMore

Using the ReadMore component is a simple way to keep longer content from cluttering up your page, giving you more control over how much content is displayed to visitors.

Import statement

import { ReadMore } from "@wfp/react"

Truncate text

Based on the type of content use react-truncate or react-truncate-html to truncate the collapsed content.

import Truncate from "react-truncate";

<ReadMore
  collapsed={
    <Truncate lines={1} ellipsis="...">
      {moreText}
    </Truncate>
  }
>
  Expanded content
</ReadMore>

Fade & animate

The maxHeight prop will allow the content to be collapsed if it extends a specific height. It will only work without the collapsed prop.

<ReadMore fade maxHeight={30}>
  The content
</ReadMore>

References

Source
Storybook

Import statement

Truncate text

Fade & animate

On this page

References