👨‍💻

Łukasz Rabiec lucasrabiec

👨‍💻

👾 Software Engineer　　　　　　　　　　　 👨‍💻 TS, JS, React, Node.js, C#　　　　　　　♥️ @LazyVim

lucasrabiec / useIsEllipsisActive.tsx

Last active November 25, 2022 14:39

React's Hook for detecting whether the text is truncated or not. It is useful if you need to show a tooltip with full-length text.

	import { useEffect, useRef, useState } from 'react';

	export function useIsEllipsisActive() {
	const textRef = useRef<HTMLParagraphElement>(null);
	const [isEllipsisActive, setIsEllipsisActive] = useState(false);
	const [rerenderSignal, setRerenderSignal] = useState({});

	// Instead of this method you can use some useDebounce hook (if your project includes any).
	function debounce(cb: (...args: unknown[]) => void, wait: number) {
	let timer: number;