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 ShowMoreLess 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 (
    <ShowMoreLess
      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

• ClassesObject
• OnExpand
• ShowMoreLessProps

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