react-clamp-lines

Responsive and accessible clamping component with «Read more»/«Read less» buttons built for React. Extended to display HTML text too.

Demo

React Clamp Lines

Install

npm i 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
• accessible
• 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. . Extended to allow the rendering of HTML

Usage

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}
        id="really-unique-id"
        lines={4}
        ellipsis="..."
        moreText="Expand"
        lessText="Collapse"
        className="custom-class"
        innerElement="p"
        html="false"
      />
    );
  }
}

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">
  <p 
    id="clamped-content-really-unique-id"
    aria-hidden="true"
  >
    clamped text here...
  </p>
  <button 
    class="clamp-lines__button"
    aria-controls="clamped-content-really-unique-id"
    aria-expanded="false"
  >
    Expand
  </button>
</div>

API

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

<ClampLines
  text={String}
  id={String}
  lines={Number}
  ellipsis={String}
  buttons={Boolean}
  moreText={String}
  lessText={String}
  className={String}
  delay={Number}
  stopPropagation={Boolean}
  innerElement={String}
  html={Boolean}
/>

prop	required	type	default value	description
text	*	{String}		Text you wish to clamp
id	*	{String}		Unique id (used for ARIA props)
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
delay		{Number}	300	Milliseconds, the function is waiting before being triggered, after it stops being called
stopPropagation		{Boolean}	false	Prevents the event from bubbling up the DOM tree when clicked on the «Read more» button
innerElement		{String}	div	Custom inner element for clamped text. This MUST be a block level element or styled as one.
html		{Boolean}	false	Flag depicting if text should be html rendered

License

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.