React Vibration Hook Implementation

Build a custom React hook, useVibration, that allows your application to trigger device vibration programmatically. This hook is essential for providing haptic feedback to users, enhancing user experience in interactive applications by giving tactile confirmation of actions.

Problem Description

Your task is to create a reusable React hook named useVibration that abstracts away the complexities of interacting with the browser's Vibration API. This hook should provide a simple interface for triggering and potentially stopping device vibrations.

Key Requirements:

• useVibration() Hook: Create a custom hook useVibration that returns a function to trigger vibration.
• triggerVibration(duration: number): The hook should expose a function triggerVibration that accepts a single argument:
  • duration: A number representing the duration of the vibration in milliseconds.
• Browser API Integration: The hook should correctly utilize the navigator.vibrate() API.
• Error Handling: Gracefully handle cases where the Vibration API is not supported by the browser.
• Cleanup: Ensure that if a vibration is ongoing and the component unmounts, the vibration is stopped.

Expected Behavior:

When triggerVibration(duration) is called, the device should vibrate for the specified duration. If the Vibration API is not available, calling triggerVibration should do nothing or log a warning to the console.

Edge Cases to Consider:

• API Not Supported: The browser might not support navigator.vibrate.
• Zero or Negative Duration: What happens if duration is 0 or negative? (The API typically handles 0 by doing nothing, and negative values might be ignored or throw errors depending on implementation).
• Multiple Vibrations: How should the hook behave if triggerVibration is called multiple times in quick succession? (The API usually queues or overrides vibrations).

Examples

Example 1: Triggering a vibration for 500ms.

import React from 'react';
import { useVibration } from './useVibration'; // Assuming your hook is in this file

function VibratingButton() {
  const { triggerVibration } = useVibration();

  const handleClick = () => {
    triggerVibration(500); // Vibrate for 500 milliseconds
  };

  return (
    <button onClick={handleClick}>
      Vibrate Me
    </button>
  );
}

Example 2: Handling cases where the Vibration API might not be supported.

import React from 'react';
import { useVibration } from './useVibration';

function SafeVibratingComponent() {
  const { triggerVibration } = useVibration();

  const handleInteraction = () => {
    // The useVibration hook should internally handle API availability
    triggerVibration(200);
  };

  return (
    <div onClick={handleInteraction} style={{ cursor: 'pointer', padding: '20px', border: '1px solid black' }}>
      Tap to get feedback (if supported)
    </div>
  );
}

Constraints

• The implementation must be in TypeScript.
• The hook must be named useVibration.
• The hook should not accept any arguments.
• The triggerVibration function should accept only a number for duration.
• Avoid using external libraries for vibration. Rely solely on the browser's native Vibration API.
• The triggerVibration function should not return any value.

Notes

• The navigator.vibrate() API is the primary interface you'll need to interact with. Refer to browser documentation for its specific behavior.
• Consider how you'll handle the cleanup if the component using the hook unmounts while a vibration is active. A useEffect hook with a cleanup function is a common pattern for this.
• Think about how to robustly check for the existence and readiness of the navigator.vibrate functionality.