CollapsibleText component, an uncontrolled component that truncates some given content at a given length to be revealed by clicking a 'Show more' link.
npm install @paprika/collapsible-textCollapsibleText component, an uncontrolled component that truncates some given content at a given length to be revealed by clicking a 'Show more' link.
``
yarn add @paprika/collapsible-text
or with npm:
`
npm install @paprika/collapsible-text
| 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. |
`js
import CollapsibleText from "@paprika/collapsible-text";
const yourComponent = () => {
return (
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.
);
};
export default yourComponent;
``
- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG