Skip to content

Instantly share code, notes, and snippets.

@ivanstnsk

ivanstnsk/useMouseHover.ts

Last active May 24, 2020 17:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ivanstnsk/08339e994662618568b0235d3b517055 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ivanstnsk/08339e994662618568b0235d3b517055 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ivanstnsk revised this gist May 24, 2020. No changes.
  2. ivanstnsk revised this gist May 24, 2020. 1 changed file with 17 additions and 14 deletions.
    31 changes: 17 additions & 14 deletions useMouseHover.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    import { useCallback, useEffect, useState, useRef } from 'react';
    import { useEffect, useState, useRef } from 'react';


    type THook<T extends HTMLElement> = [
    @@ -8,19 +8,12 @@ type THook<T extends HTMLElement> = [

    export const useMouseHover = <T extends HTMLElement>(): THook<T> => {
    const [hovered, setHovered] = useState(false);

    const ref = useRef<T>(null);

    const handleMouseOver = useCallback(() => {
    setHovered(true);
    }, [setHovered]);

    const handleMouseOut = useCallback(() => {
    setHovered(false);
    }, [setHovered]);

    useEffect(() => {
    const node = ref.current;
    const handleMouseOver = (): void => setHovered(true);
    const handleMouseOut = (): void => setHovered(false);
    const node = ref && ref.current;

    if (node) {
    node.addEventListener('mouseover', handleMouseOver);
    @@ -30,10 +23,20 @@ export const useMouseHover = <T extends HTMLElement>(): THook<T> => {
    node.removeEventListener('mouseout', handleMouseOut);
    };
    }
    }, [ref.current]);
    }, [ref]);

    return [ref, hovered];
    };

    // Use example
    // const [buttonRef, buttonHovered] = useMouseHover<HTMLButtonElement>();
    // Example of usage
    // const [buttonRef, buttonHovered] = useMouseHover<HTMLButtonElement>();
    // const color = buttonHovered ? 'red' : 'blue';
    //
    // return (
    // <button
    // ref={buttonRef}
    // style={{ color }}
    // >
    // click me
    // </button>
    // );
  3. ivanstnsk renamed this gist May 24, 2020. 1 changed file with 0 additions and 0 deletions.
    0 use Mouse Hover hook React → useMouseHover.ts
    View file
    File renamed without changes.
  4. ivanstnsk created this gist May 24, 2020.
    39 changes: 39 additions & 0 deletions use Mouse Hover hook React
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    import { useCallback, useEffect, useState, useRef } from 'react';


    type THook<T extends HTMLElement> = [
    React.RefObject<T>,
    boolean,
    ];

    export const useMouseHover = <T extends HTMLElement>(): THook<T> => {
    const [hovered, setHovered] = useState(false);

    const ref = useRef<T>(null);

    const handleMouseOver = useCallback(() => {
    setHovered(true);
    }, [setHovered]);

    const handleMouseOut = useCallback(() => {
    setHovered(false);
    }, [setHovered]);

    useEffect(() => {
    const node = ref.current;

    if (node) {
    node.addEventListener('mouseover', handleMouseOver);
    node.addEventListener('mouseout', handleMouseOut);
    return () => {
    node.removeEventListener('mouseover', handleMouseOver);
    node.removeEventListener('mouseout', handleMouseOut);
    };
    }
    }, [ref.current]);

    return [ref, hovered];
    };

    // Use example
    // const [buttonRef, buttonHovered] = useMouseHover<HTMLButtonElement>();