React library to manage long paragraphs
npm install --save show-more-lessimportReact,{useState}from'react'importstylesfrom'./ShowMoreLess.module.scss'importShowMoreLessfrom'show-more-less'import'show-more-less/dist/index.css'functionExample(){consttext='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(<ShowMoreLesstext={text}threshold={800}expanded={expanded}onExpand={setExpanded}classes={{root: styles.root,text: styles.text,clickable: styles.clickable}}/>)}exportdefaultExample| 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 |
▸ (value): void
| Name | Type | Description |
|---|---|---|
value | boolean | This is the updated value, passed as a param |
void
| 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 |
MIT © iamdipanshusingh