1.0.1 • Published 11 months ago
react-clamp-line v1.0.1
react-clamp-lines
Responsive and accessible clamping component with «Read more»/«Read less» buttons built for React.
Usage
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ClampLines from 'react-clamp-lines';
const ClampLinesSection = () => {
return (
<ClampLines
text={text_to_clamp}
id='really-unique-id'
type='html'
lines={4}
ellipsis='...'
moreText='Expand'
lessText='Collapse'
className='custom-class'
innerElement='p'
/>
);
};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:
<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.
<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) | |
| type | 'html' | 'text' | Type of string that you need to clamp | ||
| 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.