Created
March 4, 2024 14:18
-
-
Save serslon/3138d296f67263f70046c465ee6ec47c to your computer and use it in GitHub Desktop.
Checking if the element has the Ellipsis
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * using this function to check if the text is overflowed and the ellipsis is active | |
| * | |
| * Example: (showing toltipe only if the title has a long text | |
| * const elmRef = useRef(null); | |
| * | |
| * conat onHover = useCallback(() => { | |
| * const isShowToltipe = isEllipsisActive(elmRef.current); | |
| * setShowToltipe(isShowToltipe) | |
| * }, []); | |
| * | |
| * <h1 ref={elmRef} className="truncate" onMouseenter={onMouseEnter} onMouseLeave={() => setShowToltipe(false)}>Some long title </h1> | |
| * | |
| * @param e any HTML element | |
| * @returns boolean | |
| */ | |
| export const isEllipsisActive = (e: HTMLUnknownElement | null) => { | |
| if (e) { | |
| return e.offsetWidth < e.scrollWidth; | |
| } | |
| return false; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment