react-clamp-line

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.