ShowMoreLess
React library to manage long paragraphs
Install
npm install --save show-more-less
Usage
import React, { useState } from 'react'
import styles from './ShowMoreLess.module.scss'
import ShowLessMore from 'show-more-less'
import 'show-more-less/dist/index.css'
function Example() {
const text =
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dolores, cumque tenetur omnis debitis eligendi illum adipisci. Amet, ex soluta. Consequatur ab minus voluptates illum exercitationem, repellat perferendis iure possimus.'
const [expanded, setExpanded] = useState(false)
return (
<ShowLessMore
text={text}
threshold={800}
expanded={expanded}
onExpand={setExpanded}
classes={{
root: styles.root,
text: styles.text,
clickable: styles.clickable
}}
/>
)
}
export default Example
Table of contents
Type aliases
Type aliases
ClassesObject
Type declaration
Name | Type | Description |
---|---|---|
clickable? |
string | style class at the show more/less text level |
root? |
string | style class at the root level |
text? |
string | style class at the text level |
OnExpand
Type declaration
▸ (value
): void
Parameters
Name | Type | Description |
---|---|---|
value |
boolean | This is the updated value, passed as a param |
Returns
void
ShowMoreLessProps
Type declaration
Name | Type | Description | Default |
---|---|---|---|
classes? |
ClassesObject | an optional ClassesObject, for style | – |
expanded? |
boolean | determines whether the text is expanded or not | false |
onExpand? |
OnExpand | a callback function called on clicking show more/less text | – |
showLessLabel? |
string | label text for show more | …Show More |
showMoreLabel? |
string | label text for show less | Show Less |
text |
string | text to be shown | – |
threshold? |
number | a point after which the text will be trimmed | 100 |
License
MIT © iamdipanshusingh