use-line-clamp

React.js hook to detect if text will clamp in X number of lines. This allows you to use lines instead of character for implementing "show more" behaviour.

See live demo

https://user-images.githubusercontent.com/36263538/215266290-49dbc549-f710-402b-bc9e-9cc97215d829.mp4

Install

1npm install use-line-clamp
2
3pnpm install use-line-clamp
4
5yarn add use-line-clamp

Usage

1import { useRef, useState } from "react";
2import useLineClamp from "use-line-clamp";
3
4function Example() {
5  const ref = useRef<HTMLParagraphElement>(null);
6  const clamps = useLineClamp(ref, { lines: 4 });
7  const [visible, setVisible] = useState(false);
8
9  return (
10    <div>
11      <p ref={ref} className={visible ? "" : "line-clamp-4"}>
12        Lorem, ipsum dolor sit amet consectetur adipisicing elit. In consectetur
13        doloremque molestiae perspiciatis aliquam voluptatem natus quod quia
14        repellendus? Vero veniam quidem quae veritatis voluptas ratione
15        doloremque. Quo, saepe quidem. Inventore voluptatibus ipsam totam nobis
16        magni molestiae ea culpa animi?
17      </p>
18      {clamps && (
19        <button onClick={() => setVisible(!visible)}>
20          Show {visible ? "less" : "more"}
21        </button>
22      )}
23    </div>
24  );
25}