useHover

Introduce

ref로 지정한 요소에 마우스가 올라와 있는지 감지하는 훅입니다.

export interface UseHoverReturns<T> {
  isHovered: boolean;
  callbackRef: (node: T) => void;
}
 
const useHover = <T extends HTMLElement>(): UseHoverReturns<T>

callbackRef를 사용하여 ref 객체를 관리하고 마우스 이벤트 리스너를 추가합니다.

Returns

isHovered: 마우스가 요소 위에 있는지 여부를 나타내는 불리언 값
callbackRef: 대상 요소의 ref 속성에 할당하여 마우스 이벤트 리스너를 추가하는 함수

Examples

TestComponent.tsx

cconst TestComponent = () => {
  const { isHovered, callbackRef } = useHover();
 
  return (
    <div
      ref={callbackRef}
      style={{ backgroundColor: isHovered ? '#f00' : '#fff' }}
    >
      {isHovered ? 'Hovered!' : 'Not Hovered'}
    </div>
  );
};

useGeolocation useInterval