useVibration

sensors

Installation

npx usehooks-cli@latest add use-vibration

Description

A React hook for controlling device vibration using the Vibration API. Provides functions to trigger vibration patterns and stop ongoing vibrations.

Return Type

UseVibrationReturn

Property	Type	Description
vibrate	(pattern: number \| number[]) => boolean	Trigger vibration with specified pattern (duration in ms or array of durations)
stop	() => void	Stop any ongoing vibration
isSupported	boolean	Whether the Vibration API is supported in the current browser

Examples

Notification with vibration

Basic vibration patterns for different notification types

import { useVibration } from '@usehooks.io/use-vibration';

function NotificationComponent() {
  const { vibrate, stop, isSupported } = useVibration();

  const handleNotification = () => {
    // Single vibration for 200ms
    vibrate(200);
  };

  const handleUrgentNotification = () => {
    // Pattern: vibrate 100ms, pause 50ms, vibrate 100ms, pause 50ms, vibrate 200ms
    vibrate([100, 50, 100, 50, 200]);
  };

  const handleError = () => {
    // Long vibration for errors
    vibrate(500);
  };

  if (!isSupported) {
    return <div>Vibration not supported on this device</div>;
  }

  return (
    <div>
      <button onClick={handleNotification}>
        Normal Notification
      </button>
      
      <button onClick={handleUrgentNotification}>
        Urgent Notification
      </button>
      
      <button onClick={handleError}>
        Error Notification
      </button>
      
      <button onClick={stop}>
        Stop Vibration
      </button>
    </div>
  );
}

Dependencies

react

Notes

•Vibration API is primarily supported on mobile devices
•Pattern arrays alternate between vibration and pause durations
•Returns false if vibration fails or is not supported
•Some browsers may ignore vibration requests for security/UX reasons
•Vibration may be disabled in browser settings or by user preference

Implementation

'use client';

import { useCallback, useRef } from "react";

interface UseVibrationReturn {
  vibrate: (pattern: number | number[]) => boolean;
  stop: () => void;
  isSupported: boolean;
}

export const useVibration = (): UseVibrationReturn => {
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const isSupported =
    typeof navigator !== "undefined" && "vibrate" in navigator;

  const vibrate = useCallback(
    (pattern: number | number[]): boolean => {
      if (!isSupported) {
        return false;
      }

      try {
        return navigator.vibrate(pattern);
      } catch (error) {
        console.warn("Vibration failed:", error);
        return false;
      }
    },
    [isSupported]
  );

  const stop = useCallback(() => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }

    if (isSupported) {
      navigator.vibrate(0);
    }
  }, [isSupported]);

  return {
    vibrate,
    stop,
    isSupported,
  };
};

export default useVibration;

useUserMedia

CLI Docs All Hooks

useBluetooth