@bisvarup/react-read-more

Add a readmore text to your long content

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