Nepotistic Pontifex Maximus

    @bisvarup/react-read-more
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    @bisvarup/react-read-more

    Add a readmore text to your long content

    NPM JavaScript Style Guide

    Wrap any component with this component to show a read more text. On clicking the read more text user will be able to see the full content. On full content is shown it cannot be reverted back.

    There is also a withReadMore HOC wrapper along with this file. They do the same thing and usage depends on the choice of the user.

    Check the docs

    Install

    Install with npm

    npm install --save @bisvarup/react-read-more

    or

    Install with yarn

    yarn add @bisvarup/react-read-more

    Standard Usage

    import React, { Component } from 'react'
    import ReadMore from '@bisvarup/react-read-more'
    
    class Example extends Component {
      render() {
        return (
          <div>
            ...
            <ReadMore
              readMoreStyles={{
                background: '#fff' /** white is the default color btw */
              }}
              lineHeight={2}
              height={10}
            >
              <ol style={{ margin: 0 }}>
                <li>
                  This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf
                </li>
                <li>
                  This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf
                </li>
                <li>
                  This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf
                </li>
                <li>
                  This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf
                </li>
                <li>
                  This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf
                </li>
                <li>
                  This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf
                </li>
                <li>
                  This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf
                </li>
                <li>
                  This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf
                </li>
                <li>
                  This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf
                </li>
              </ol>
            </ReadMore>
            ...
          </div>
        )
      }
    }

    HOC Usage

    const Component = (props) => (
      <ol style={{ margin: 0 }}>
        <li>This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf</li>
        <li>This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf</li>
        <li>This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf</li>
        <li>This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf</li>
        <li>This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf</li>
        <li>This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf</li>
        <li>This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf</li>
        <li>This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf</li>
        <li>This is one of the lines, aasfsfsafsas fhgsfhgsfgsi fis fgisgf</li>
      </ol>
    )
    
    ...
    ...
    
    export withReadMore(Component)

    License

    MIT © bisho1995

    Install

    npm i @bisvarup/react-read-more

    DownloadsWeekly Downloads

    5

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    28.5 kB

    Total Files

    12

    Last publish

    Collaborators

    • bisvarup