react-clamp-lines

react-clamp-lines

Responsive clamping component with «Read more»/«Read less» buttons built for React.

DEMO

install

npm install --save react-clamp-lines

features

• built for React with no dependencies
• option for «Read more» and «Read less» buttons
• customizable ellipsis text
• customizable CSS classes
• responsive
• window resize event debounced — and why it's important

If your web app uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn't fire so often that it bricks browser performance.

usage

import React, { Component } from 'react';
import React-DOM from 'react-dom';
import ClampLines from 'react-clamp-lines';

class App extends Component {
  render() {
    return (
        <ClampLines
            text={text_to_clamp}
            lines="4"
            ellipsis="..."
            moreText="Expand"
            lessText="Collapse"
            className="custom-class" />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('clamp'));

The component and the or «Read more» button always have the clamp-lines and clamp-lines__button CSS classes respectively. In the example above the custom-class will be added to clamp-lines, so the output will be:

<div class="clamp-lines custom-class">
    <div>clamped text here...</div>
    <button class="clamp-lines__button">Expand</button>
</div>

API

List of all available props with their default values and description.

<ClampLines
    text={String}
    lines={Number}
    ellipsis={String}
    buttons={Boolean}
    moreText={String}
    lessText={String}
    className={String}
    debounce={Number} />

prop	type	default value	description
text	{String}		Text you wish to clamp
lines	{Number}	3	Number of visible lines
ellipsis	{String}	...	Text content for the ellipsis - will appear after the clamped lines
buttons	{Boolean}	true	The «Read more» and «Read less» buttons
moreText	{String}	Read more	«Read more» button value
lessText	{String}	Read less	«Read less» button value
className	{String}		CSS class names added to component
debounce	{Number}	300	Milliseconds, the function is waiting before being triggered, after it stops being called

run the example

git clone https://github.com/zoltantothcom/react-clamp-lines.git
cd react-clamp-lines
npm install
npm start

then open http://localhost:3000

license

Unlicense