react-clamp-lines
Responsive and accessible clamping component with «Read more»/«Read less» buttons built for React.
Demo
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 importantIf 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
;;; { return <ClampLines text=text_to_clamp id="really-unique-id" lines=4 ellipsis="..." moreText="Expand" lessText="Collapse" className="custom-class" innerElement="p" /> ; } ReactDOM;
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:
clamped text here... Expand
API
List of all available props with their default values and description.
<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 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.