@lagroms/react-multiline-clamp
v1.0.7
Published
React component that uses the css line clamping to truncate given text in specified lines.
Downloads
7
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) |