# react-shears

> Trim text with ease!

Latest version **1.0.3** (published 2019-06-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-shears
pnpm add react-shears
yarn add react-shears
bun add react-shears
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-06-02 |
| First published | 2019-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Ed Cheng |
| Maintainers | edc123 |
| Keywords | react, ellipsis, truncate, truncation, truncated, js, content, shorten, javascript, text, trim |

## Links

- npm: https://www.npmjs.com/package/react-shears
- Repository: https://github.com/edc123/react-shears
- Homepage: https://github.com/edc123/react-shears#readme
- Issues: https://github.com/edc123/react-shears/issues
- npm.io page: https://npm.io/package/react-shears

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.3 (latest) — 2019-06-02
- 1.0.2 — 2019-06-02
- 1.0.1 — 2019-06-02
- 1.0.0 — 2019-06-01
- 0.0.3 — 2019-05-27
- 0.0.2 — 2019-05-26
- 0.0.1 — 2019-05-26

## README

# react-shears
[![npm](https://img.shields.io/npm/v/react-shears.svg)](https://www.npmjs.com/package/react-shears) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-shears.svg) [![GitHub stars](https://img.shields.io/github/stars/edc123/react-shears.svg?style=social)](https://github.com/edc123/react-shears)

✂️ Multiline ellipsis for text ... that refreshes on window resize. Just define a maximum height!

![Demo with resizing browser](https://i.imgur.com/Jcf1bKF.gif)

**react-shears** places an ellipsis (...) in your text! All you have to do is define a maximum height and the component takes care of the rest.

### Other benefits
- _Fits as much text in as possible._ This is because it uses a binary search as well as a per-character fitting algorithm.

- _Accessible._ Text that is hidden is still visible to screen readers and the ellipsis is hidden away.

- _Browser compatibility._ Supports IE >= 8 by default. If you use the built-in fade effect (fadeInDuration), it uses CSS `transition` which is IE >= 10.

---

# Get some shears!

```
npm i react-shears
yarn add react-shears
```

> **Note**: Your project must support the use of React Hooks. (React >= 16.8.0)

# Example usage

```
import Shears from 'react-shears'

<Shears
  maxHeight={ 42 }
  text={ title }
  tag="p"
  className="title"
  fadeInDuration={ 200 }
  debounceDuration={ 200 }
/>
```

# Props

Option | Type | Default | Description
------ | ---- | ------- | -----------
maxHeight | number of pixels | - | _Required._ This is how high you want to limit your multiline trimmed text to.
text | string | `''` | _Required._ This is the text you want to trim. Strictly strings only, no HTML.
tag | string | `'div'` | _Optional._ Customise the HTML tag the `<Shears / >` component returns.
className | string | `''` | _Optional._ A custom class name.
fadeInDuration | number of ms | `0` | _Optional._ Turns on a fade in effect on component mount (done with CSS `transition` property).
debounceDuration | number of ms | `200` | _Optional._ Change the debounce time if desired.

# v1.0.0 Release Notes
- added options for fade in and debounce durations
- now dynamically updates with text prop change
- performance improvements


---

### Limitations

- Does not handle when the container itself resizes due transforming it's width with say, CSS. It only looks for width changes due to window resize events.
- Currently only takes pure text input, and will not work with HTML.
- Developer needs to handle sanitising input on their side.

# Contributing & Bugs
PRs, feature requests and bug reports are welcome!

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