Under construction...: Don't use this in production until this notice is removed! Ironing out some problems with some use cases.
react-shears
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
transitionwhich 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!
