Skip to content

Instantly share code, notes, and snippets.

View lucasrabiec's full-sized avatar
👨‍💻

Łukasz Rabiec lucasrabiec

👨‍💻
  • 1 More Bug
  • Poland
  • 11:06 (UTC +02:00)
View GitHub Profile
@lucasrabiec
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;