node package manager



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 (
            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>


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

    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


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.