useMouse

Hook that manages a mouse position

sensorslowtest coverage

Ship faster with reactuse

A collection of essential React hooks, fully typed and ready for production.

import { useMouse } from '@siberiacancode/reactuse';
import { ArrowRightIcon } from 'lucide-react';
import { useRef } from 'react';

const Demo = () => {
  const spotlightRef = useRef<HTMLDivElement>(null);

  const mouse = useMouse<HTMLDivElement>((value) => {
    const spotlight = spotlightRef.current;
    if (!spotlight) return;
    spotlight.style.setProperty('--x', `${value.elementX}px`);
    spotlight.style.setProperty('--y', `${value.elementY}px`);
  });

  return (
    <section className='flex w-full max-w-md justify-center p-4'>
      <div
        ref={mouse.ref}
        className='group relative w-full overflow-hidden rounded-2xl border border-white/10 bg-neutral-950 p-8'
      >
        <div
          ref={spotlightRef}
          style={{
            background:
              'radial-gradient(300px circle at var(--x) var(--y), rgba(255,255,255,0.1), transparent 65%)'
          }}
          className='pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100'
        />

        <div className='relative flex flex-col gap-4'>
          <img alt='reactuse' className='size-9' src='https://reactuse.org/logo.svg' />

          <div className='flex flex-col gap-1.5'>
            <h2 className='text-xl font-bold text-white'>Ship faster with reactuse</h2>
            <p className='max-w-xs text-sm text-neutral-400'>
              A collection of essential React hooks, fully typed and ready for production.
            </p>
          </div>

          <div className='mt-2'>
            <button type='button'>
              Get started
              <ArrowRightIcon className='size-4' />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Demo;

Installation

pnpm add @siberiacancode/reactuse

Usage

const mouse = useMouse(ref);
// or
const mouse = useMouse<HTMLDivElement>();

Type Declarations

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseMouseReturn {
  /** The latest mouse value snapshot */
  snapshot: UseMouseValue;
  /** Function to enable subscriptions and rerender on next updates */
  watch: () => UseMouseValue;
}

export interface UseMouseValue {
  /** The current mouse client x position */
  clientX: number;
  /** The current mouse client y position */
  clientY: number;
  /** The current element position x */
  elementPositionX: number;
  /** The current element position y */
  elementPositionY: number;
  /** The current element x position */
  elementX: number;
  /** The current element y position */
  elementY: number;
  /** The current mouse x position */
  x: number;
  /** The current mouse y position */
  y: number;
}

export type UseMouseCallback = (value: UseMouseValue, event: Event) => void;

export interface UseMouse {
  (target: HookTarget, callback?: UseMouseCallback): UseMouseReturn;

  <Target extends Element>(
    callback?: UseMouseCallback,
    target?: never
  ): UseMouseReturn & {
    ref: StateRef<Target>;
  };

  (target?: Window, callback?: UseMouseCallback): UseMouseReturn;
}

API

Parameters

Name	Type	Default	Note
target	HookTarget	window	The target element to manage the mouse position for
callback	(value: UseMouseValue, event: Event) => void	-	The callback to invoke on mouse updates

Returns

UseMouseReturn

Parameters

Name	Type	Default	Note
callback	(value: UseMouseValue, event: Event) => void	-	The callback to invoke on mouse updates

Returns

UseMouseReturn & { ref: StateRef<Target> }

Contributors

ddebabinhhywax

Last updated on

useKeysPressed useMutationObserver