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

``js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ClampLines from 'react-clamp-lines';

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

ReactDOM.render(, 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:

`html



`

API

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

`javascript
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.