React Multiline Clamping

React component that uses the css line clamping to truncate given text in specified lines.

Codesandbox demo

Features

- 🎉 Uses the css line clamp property
- 😱 It works both with plain text and HTML/Components
- 💥 Integrated show more/less behaviour
- 👂 Listens to text and lines changes and responds accordingly
- ⚙️ Easy-to-use component API
- 🌳 Tiny size, only 1.4kb

Installation

``shell
npm install react-multiline-clamp
`

$3

`jsx
import Clamp from 'react-multiline-clamp';

const MyComponent = () => {
return (



Multiline text



);
};
`

$3

`jsx
import Clamp from 'react-multiline-clamp';

const MyComponent = () => {
return (
lines={2}
maxLines={6}
withToggle
showMoreElement={({ toggle }) => (

Show more

)}
showLessElement={({ toggle }) => (

menossssss

)}
>


Multiline text



);
};
``

API

| Name | Type | Default | Description |
| :-------------: | :---------------------: | :---------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: |
| children | Element | | The expected element to which the ellipsis would be applied. It could be plain text or any HTML/Component |
| lines | Number | 2 | The number of lines we want the text to be truncated to |
| maxLines | Number | 8 | The maximum number of lines we want to show after clicking on showMore button |
| withTooltip | Boolean | true | Indicates if we want the text to have a tooltip title |
| withToggle | Boolean | false | Indicates if we want to have the show more/less actions |
| showMoreElement | Element | More | Element that triggers the show more action |
| showLessElement | Element | Less | Element that triggers the show less action |
| onShowMore | (isExpanded) => Boolean | () => {} | A callback function that gets calls every time we click on the show more/less buttons. It returns whether the text is expanded or not (Boolean) |

#### See browser support

##### Author: Mikel Parra |