@paprika/collapsible-text

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

Usage no npm install needed!

<script type="module">
  import paprikaCollapsibleText from 'https://cdn.skypack.dev/@paprika/collapsible-text';
</script>

README

@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