@paprika/collapsible-text NPM | npm.io

4.0.1 • Published 2 years ago

Install

Weekly downloads

749

License

MIT

Repository

Last release

2 years ago

@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

@babel/runtime-corejs2 @paprika/button @paprika/tokens lodash.truncate prop-types uuid

@infinitebrahmanuniverse/nolb-_pap @everything-registry/sub-chunk-704 @paprika/inline-editors

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago