# react-clamp-lines

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

Latest version **3.0.3** (published 2022-06-21) · Unlicense license · 0 weekly downloads

## Install

```sh
npm install react-clamp-lines
pnpm add react-clamp-lines
yarn add react-clamp-lines
bun add react-clamp-lines
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2022-06-21 |
| First published | 2017-07-18 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 144 |
| Author | Zoltan Toth |
| Maintainers | zoltantoth |
| Keywords | clamp, clamping, react clamp, clamp lines, react clamp lines, react clamping component, react ellipsis |

## Links

- npm: https://www.npmjs.com/package/react-clamp-lines
- Repository: https://github.com/zoltantothcom/react-clamp-lines
- Homepage: https://stackblitz.com/edit/react-clamp-lines
- Issues: https://github.com/zoltantothcom/react-clamp-lines/issues
- npm.io page: https://npm.io/package/react-clamp-lines

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Recent versions

- 3.0.3 (latest) — 2022-06-21
- 3.0.2 — 2019-05-24
- 3.0.1 — 2019-05-24
- 3.0.0 — 2019-05-08
- 2.4.0 — 2019-04-18
- 2.3.0 — 2019-04-16
- 2.2.0 — 2019-01-28
- 2.1.0 — 2019-01-15
- 2.0.2 — 2018-12-07
- 2.0.1 — 2018-12-05
- 2.0.0 — 2018-12-05
- 1.1.0 — 2018-03-21
- 1.0.3 — 2018-02-09
- 1.0.2 — 2017-12-21
- 1.0.1 — 2017-12-16
- … 3 more at https://npm.io/package/react-clamp-lines/versions

## README

# react-clamp-lines

![npm](https://img.shields.io/npm/dm/react-clamp-lines.svg) ![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/react-clamp-lines.svg)

Responsive and accessible clamping component with _«Read more»_/_«Read less»_ buttons built for [React](http://facebook.github.io/react/).

![react-clamp-lines](react-clamp.png 'react-clamp-lines')

## Demo

[**React Clamp Lines**](https://stackblitz.com/edit/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](https://davidwalsh.name/javascript-debounce-function)
  > 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 (
      <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 _&laquo;Read more&raquo;_ 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
<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.

```javascript
<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&#160;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 _&laquo;Read more&raquo;_ and _&laquo;Read less&raquo;_ buttons |
| moreText        |          | {String}  | `Read more`        | _&laquo;Read more&raquo;_ button value |
| lessText        |          | {String}  | `Read less`        | _&laquo;Read less&raquo;_ 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 _&laquo;Read more&raquo;_ button |
| innerElement    |          | {String}  | `div`              | Custom inner element for clamped text. **This MUST be a [block level element](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements) 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](http://unlicense.org) for full details.

---
_Source: https://npm.io/package/react-clamp-lines · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._