Have ideas to improve npm?Join in the discussion! »

    react-collapsible-paragraph
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    react-collapsible-paragraph

    A Collapsible Paragraph Component for Reactjs

    npm NPM npm type definitions

    Current works

    Customizable expan/collapse handler

    Install

    yarn add react-collapsible-paragraph
    # or
    npm install react-collapsible-paragraph

    Usage

    import React from "react";
    import Collapsible from "react-collapsible-paragraph";
    
    function App() {
      return (
        <div style={{ lineHeight: "22px" }}>
          <Collapsible lines={2}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.
          </Collapsible>
        </div>
      );
    }

    Essential

    • Collapsible inherits its parentElement's lineHeight which is necessay for the collapse mechanism. Therefore, parent must provide lineHeight property

    Props

    Props Types Expanation Default
    lines number If the content is longer than a certain line number. The content can be collapsed 2
    locales {expand: string; collapse: string} Locale for expan/collapse handler based on controlled usage {expand: "expand", collapse: "collapse"}

    Demo

    Install

    npm i react-collapsible-paragraph

    DownloadsWeekly Downloads

    13

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    25.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar