@lagroms/react-multiline-clamp
v1.0.7
Published
React component that uses the css line clamping to truncate given text in specified lines.
Downloads
10
Maintainers
Readme
React Multiline Clamping
React component that uses the css line clamping to truncate given text in specified lines.
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
npm install react-multiline-clamp
Basic example
import Clamp from "react-multiline-clamp";
const MyComponent = () => {
return (
<Clamp withTooltip lines={2}>
<p>Multiline text</p>
</Clamp>
);
};
With show more/less behaviour
import Clamp from "react-multiline-clamp";
const MyComponent = () => {
return (
<Clamp
lines={2}
withToggle
showMoreElement={({ toggle }) => (
<button type="button" onClick={toggle}>
Show more
</button>
)}
showLessElement={({ toggle }) => (
<span type="button" onClick={toggle}>
menossssss
</span>
)}
>
<p>Multiline text</p>
</Clamp>
);
};
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 | undefined | 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) |