Description:
use-clamp-text is a React hook that truncates long text to a specific number of lines. Flexible, configurable, and fully responsive.
How to use it:
1. Installation.
# Yarn $ yarn add use-clamp-text # NPM $ npm i use-clamp-text
2. Import the use-clamp-text hook.
import { useState } from "react";
import { useClampText } from "use-clamp-text";3. Basic usage.
const longText = "Long Text Here";
function ClampedText {
const [ref, { noClamp, clampedText }] = useClampText({
text: longText,
});
return (
<section>
<h1>
{noClamp ? 'Not truncated' : 'Truncated'}
</h1>
<div ref={ref}>
{clampedText}
</div>
</section>
);
}4. Available configs.
interface ClampTextConfig {
text: string;
ellipsis: string | number;
lines?: number;
expanded?: boolean;
debounceTime?: number;
charWidth?: number;
}Preview:
