React

Import useTaptic from taptickit/react. The hook manages a single TapticKit instance for the component lifecycle.

Basic usage

"use client";

import { useTaptic } from "taptickit/react";

export function HapticButton() {
  const { trigger, cancel, isSupported } = useTaptic();

  return (
    <button type="button" onClick={() => trigger("medium")}>
      Tap
    </button>
  );
}

Options

useTaptic(options?) accepts TapticKitOptions:

debug — When true, enables desktop-style feedback (audio + timing) even if navigator.vibrate exists (also used when vibration is unsupported).
showSwitch — Shows the built-in accessibility control in the DOM when true.

Options are applied on mount; debug and showSwitch are synced when they change.

Returns

Property	Type	Description
`trigger`	`(input?, options?) => Promise<void> \| undefined`	Same as `TapticKit.trigger`
`cancel`	`() => void`	Stops the current pattern and clears vibration
`isSupported`	`boolean`	Static: `navigator.vibrate` is available

Next.js

Client components must include "use client" at the top of the file. See Next.js & SSR.