An accessible and easy read more/less component for ReactJS.

Installing

yarn add react-readmore-and-readless

or

npm install --save react-readmore-and-readless

Basic Example

import { ReadMoreReadLess } from "react-readmore-and-readless"

export default () => (
  <ReadMoreReadLess
    text="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur voluptate, laborum sunt repellendus molestias blanditiis vero. Nemo atque quidem non."
    charLimit={50}
  />
)

API

Components

<ReadMoreReadLess />

rootClassName: string | null

default: null

Provide a custom class name for the container <p /> of the ReadMoreReadLess Component.This is an optional prop.

text: string

default: ''

text is the only required prop for this component, it is the text on which you want read more / read less functionality.

charLimit: number

default: 70

This is the default length of the text after which our text should be collapsible or after which the read more/less buttons should appear.This is an optional prop.

readMoreText: string

default: "Read More"

To customize the text shown on read more button use this prop.This is an optional prop.

readLessText: string

default: "Read More"

To customize the text shown on read less button use this prop.This is an optional prop.

rootStyles: jsx style object

default: null

If you want to provide styles to the root/container element use this prop to specify the styles for it.This is an optional prop.

truncateEllipsis: string

default: ...

If you don't like the ellipsis which appears while the text is collapsed, use this prop to change that.This is an optional prop.

readMoreStyle: jsx style object

default: null

If you want to provide styles to the readmore button use this prop to specify the styles for it.This is an optional prop.

readLessStyle: jsx style object

default: null

If you want to provide styles to the readless button use this prop to specify the styles for it.This is an optional prop.

readMoreClassName: string | null

default: null

Provide a custom class name for the read more button.This is an optional prop.

readLessClassName: string | null

default: null

Provide a custom class name for the read less button.This is an optional prop.

##Some Examples which may come handy:

With custom classes for readmore and readless, custom read more/less buttons text, truncateEllipsis text, custom truncate limit.

import { ReadMoreReadLess } from "react-readmore-and-readless"
const App = () => (
  <ReadMoreReadLess
    text="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur voluptate, laborum sunt repellendus molestias blanditiis vero. Nemo atque quidem non."
    charLimit={50}
    truncateEllipsis=",,,"
    readMoreText="+"
    readLessText="-"
    readMoreClassName="readmore"
    readLessClassName="readless"
  />
)

With style object for readmore and readless, custom read more/less buttons text

import { ReadMoreReadLess } from "react-readmore-and-readless"
const App = () => (
  <ReadMoreReadLess
    text="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur voluptate, laborum sunt repellendus molestias blanditiis vero. Nemo atque quidem non."
    readMoreText="Expand"
    readLessText="Collapse"
    readMoreStyle={{
      color: "red",
    }}
    readLessStyle={{
      color: "green",
    }}
  />
)

With style object for root, readmore and readless

import { ReadMoreReadLess } from "react-readmore-and-readless"
const App = () => (
  <ReadMoreReadLess
    text="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur voluptate, laborum sunt repellendus molestias blanditiis vero. Nemo atque quidem non."
    readMoreText="Expand"
    readLessText="Collapse"
    rootStyles={{
      background: 'gray'
      color: 'lightgray'
    }}
    readMoreStyle={{
      color: "red",
    }}
    readLessStyle={{
      color: "green",
    }}
  />
)

License

MIT