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 />
string | null
rootClassName: default:
null
Provide a custom class name for the container <p />
of the ReadMoreReadLess Component.This is an optional prop.
string
text: default:
''
text is the only required prop for this component, it is the text on which you want read more / read less functionality.
number
charLimit: 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.
string
readMoreText: default:
"Read More"
To customize the text shown on read more button use this prop.This is an optional prop.
string
readLessText: default:
"Read More"
To customize the text shown on read less button use this prop.This is an optional prop.
jsx style object
rootStyles: 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.
string
truncateEllipsis: 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.
jsx style object
readMoreStyle: 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.
jsx style object
readLessStyle: 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.
string | null
readMoreClassName: default:
null
Provide a custom class name for the read more button.This is an optional prop.
string | null
readLessClassName: 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