react-multiline-clamp

    2.0.0 • Public • Published

    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)

    See browser support

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

    Install

    npm i react-multiline-clamp

    DownloadsWeekly Downloads

    4,456

    Version

    2.0.0

    License

    none

    Unpacked Size

    20 kB

    Total Files

    4

    Last publish

    Collaborators

    • lyn0tt