https://github.com/vimtor/use-line-clamp
React.js hook to detect if text will clamp in X number of lines.
https://github.com/vimtor/use-line-clamp
Last synced: 10 months ago
JSON representation
React.js hook to detect if text will clamp in X number of lines.
- Host: GitHub
- URL: https://github.com/vimtor/use-line-clamp
- Owner: vimtor
- License: mit
- Created: 2023-01-28T12:19:26.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-28T12:38:56.000Z (about 3 years ago)
- Last Synced: 2025-04-02T06:02:04.180Z (11 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/use-line-clamp
- Size: 27.3 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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://stackblitz.com/edit/use-line-clamp?file=App.tsx)
https://user-images.githubusercontent.com/36263538/215266290-49dbc549-f710-402b-bc9e-9cc97215d829.mp4
## Install
```sh
npm install use-line-clamp
pnpm install use-line-clamp
yarn add use-line-clamp
```
## Usage
```tsx
import { useRef, useState } from "react";
import useLineClamp from "use-line-clamp";
function Example() {
const ref = useRef(null);
const clamps = useLineClamp(ref, { lines: 4 });
const [visible, setVisible] = useState(false);
return (
Lorem, ipsum dolor sit amet consectetur adipisicing elit. In consectetur
doloremque molestiae perspiciatis aliquam voluptatem natus quod quia
repellendus? Vero veniam quidem quae veritatis voluptas ratione
doloremque. Quo, saepe quidem. Inventore voluptatibus ipsam totam nobis
magni molestiae ea culpa animi?
{clamps && (
setVisible(!visible)}>
Show {visible ? "less" : "more"}
)}
);
}
```