@schibstedspain/sui-collapsible-readmore

1.3.0 • Public • Published

CollapsibleReadmore

Just a simple collapsible read more component, which allows truncating the wrapped content with a height in pixels higher than the value provided in prop maxHeight. It also adds an ellipsis (with customisable text and icon) at the bottom, which allows to expand/collapse the content wrapped.

Installation

$ npm install @schibstedspain/sui-collapsible-readmore --save

Usage

Basic usage

import CollapsibleReadmore from '@schibstedspain/sui-collapsible-readmore'

return (
  const ellipsisTextsToDisplay = {
    collapsed: 'leer más', expanded: 'leer menos'
  }

  const handleClick = ({ collapsed }) => {
    console.log('Is content collapsed', collapsed)
  }

  <CollapsibleReadmore
    ellipsisText={ellipsisTextsToDisplay}
    gradient
    maxHeight={125}
    onEllipsisClick={handleClick}
  />
)

Find full description and more examples in the demo page.

Readme

Keywords

none

Package Sidebar

Install

npm i @schibstedspain/sui-collapsible-readmore

Weekly Downloads

1

Version

1.3.0

License

MIT

Unpacked Size

15.8 kB

Total Files

9

Last publish

Collaborators

  • schibstedspain