Skip to content

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

License

Notifications You must be signed in to change notification settings

zoltantothcom/react-clamp-lines

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-clamp-lines

npm Snyk Vulnerabilities for npm package

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

react-clamp-lines

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.

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"
      />
    );
  }
}

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}
/>
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.

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.