Skip to content

mikelpmc/react-multiline-clamping

Repository files navigation

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}
            maxLines={6}
            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 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)