@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;