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

React Clamp Lines

npm install --save react-clamp-lines

• 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.

import React, { Component } from 'react';
import ReactDOM 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>

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}
  delay={Number}
  stopPropagation={Boolean}
/>

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

See Unlicense for full details.