react-shears

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

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!