fp/services/next/app/components/vibrate-test.tsx

'use client';

import { useVibrate } from '@react-hookz/web';
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStop, faPlay } from '@fortawesome/free-solid-svg-icons';

export default function VibrateTest() {
  const [doVibrate, setDoVibrate] = useState(false)

  useVibrate(
    doVibrate,
    [100, 30, 100, 30, 100, 30, 200, 30, 200, 30, 200, 30, 100, 30, 100, 30, 100],
    true
  );
  return (
    <>
      <p>This experimental test is meant to activate your device's vibration.</p>
      <button
        className="button is-info"
        type="button"
        onClick={() => {
          setDoVibrate(!doVibrate);
        }}>
        {doVibrate ? <><FontAwesomeIcon icon={faStop} className="mr-2"></FontAwesomeIcon>Stop</> : <><FontAwesomeIcon icon={faPlay} className="mr-2"></FontAwesomeIcon>Start</>} vibration
      </button>
    </>
  )
}