Light

mikelpmc / react-multiline-clamping Goto Github PK

View Code? Open in Web Editor NEW

17.0 2.0 4.0 6.34 MB

React multiline text clamping component with show more/less feature

Home Page: https://codesandbox.io/embed/react-multiline-clamp-luw4q

License: MIT License

JavaScript 6.39% HTML 93.61%

react react-component webkit-line-clamp truncate ellipsis multiline-ellipsis text-ellipsis truncate-text reactjs

react-multiline-clamping's Introduction

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 [email protected] | http://github.com/mikelpmc

react-multiline-clamping's People

Contributors

Stargazers

Watchers

Forkers

dnish sborsje lagroms whatcould

react-multiline-clamping's Issues

Another element instead of button

Hey,
would it be possible to add another element instead of the button, to expand the text?

Licensing?

Hi Mikel,

I wasn't able to find the license for the project - is it MIT like React, or is it available under a different license?

maxLines default value

Problem: I have a use case where I want to show the whole string when the user clicks on Show More cta but maxLines prop default value caps it to 8 lines.
Temporary solution: I have a huge value on maxLines prop for now to fix that but it somehow seems very hacky
Question: Is there any other way I could achieve that like without having to specify a huge number for maxLines prop value

it doesn't work in Firefox

In Chrome do not exist error, but in firefox has error.

overflow: hidden;
display: -webkit-box;
-moz-box-orient: vertical;
-webkit-line-clamp: 4;

Able to pass props to buttons

Hi! This library is great!

I'm using this with Bulma, and I'd love to be able to pass down some classNames to add to the Show More and Show Less buttons.

I was thinking the best way to do this would be to add another prop to Clamp like:

buttonProps = {
  showMore: {},
  showLess: {},
}

and then spread the props in like:

            {showMore && !isExpanded && (
                <button
                    type="button"
                    onClick={() => handleToggleShowMore(true)}
                    {...buttonProps.showMore}
                >
                    {texts.showMore}
                </button>
            )}

            {isExpanded && (
                <button
                    type="button"
                    onClick={() => handleToggleShowMore(false)}
                    {...buttonProps.showLess}
                >
                    {texts.showLess}
                </button>
            )}

If this sounds good, I'd love to contribute this change. Let me know :)

Thanks.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.