1.1.3 • Published 4 years ago
read-more-less-react v1.1.3
React read more/less
A react component for long text that needs read more/less functionality.
Note
Do not forget to import the styling
import 'read-more-less-react/dist/index.css';props
| props | signature | required | description |
|---|---|---|---|
| text | string | true | Text to be displayed with read more/less |
| lines | number | false | Number of lines to be showed when in collapsed state (default: 3) |
| type | 'plainText', 'html' | false | Type of the text. It can be either plain text string or an html string |
| readMoreText | string | false | Read more button text (default: More) |
| readLessText | string | false | Read less button text (default: Less) |
| onAction | () => void | false | If passed, this method will be called when Read more button is clicked |
classes
| css class | description |
|---|---|
| rm-container | Main container class |
| rm-text-wrapper | Text wrapper class |
| rm-typography | Text class |
| rm-action-button-container | Action button container class |
| rm-more-button | Action read-more button class |
| rm-less-button | Action read-less button class |
Example
import ReadMoreText from 'read-more-less-react';
import 'read-more-less-react/dist/index.css'<ReadMoreText
lines={5}
text={TEXT}
/>Note
Do not forget to import the styling import 'read-more-less-react/dist/index.css';