@paprika/collapsible-text

Description

CollapsibleText component, an uncontrolled component that truncates some given content at a given length to be revealed by clicking a 'Show more' link.

Installation

yarn add @paprika/collapsible-text

or with npm:

npm install @paprika/collapsible-text

Props

CollapsibleText

| Prop | Type | required | default | Description | | --------------- | ------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------- | | a11yText | string | false | null | Additional description for "Show more" link. Should be a "topic" that will be appended to "Show more about [topic]". | | children | node | true | - | Full content to be revealed. Can include HTML markup, but should not include dynamic React nodes. | | collapsedLength | number | false | 255 | Length, in characters, of truncated preview content. |

Usage

import CollapsibleText from "@paprika/collapsible-text";

const yourComponent = () => {
  return (
    <CollapsibleText collapsedLength={64} a11yText="cardigans">
      <p>
        Lorem hipsum cardigan. Plaid brunch street cred cloud bread art party pickled, VHS fingerstache la croix paleo
        single-origin coffee. Pinterest normcore wayfarers gentrify marfa helvetica street art vegan. Wayfarers portland
        chicharrones craft beer sartorial. Cray raw denim listicle mixtape, pug farm-to-table tofu ennui whatever
        williamsburg. Chia offal slow-carb, kickstarter gastropub letterpress echo park mustache irony 90s.
      </p>
    </CollapsibleText>
  );
};

export default yourComponent;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG