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

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)

See browser support

Author: Mikel Parra mikelpmc@gmail.com | http://github.com/mikelpmc