useHaptic

A hook for adding haptic feedback to interactions in React Native applications.

Features

Support for different haptic feedback intensities
Platform-safe implementation
Easy integration with components
Automatic web platform handling

Installation

npx shadcn@latest add "https://frappe-ui-react.tmls.dev/registry/use-haptic"

Usage

Basic Usage

import { useHaptic } from "@/hooks/use-haptic";
import { Button } from "@/components/ui/button";

export function HapticDemo() {
const triggerHaptic = useHaptic();

return (
  <Button onPress={triggerHaptic}>
    Trigger Haptic
  </Button>
);
}

Different Feedback Types

import { useHaptic } from "@/hooks/use-haptic";
import { Button } from "@/components/ui/button";

export function HapticTypes() {
const lightHaptic = useHaptic("light");
const mediumHaptic = useHaptic("medium");
const heavyHaptic = useHaptic("heavy");
const selectionHaptic = useHaptic("selection");

return (
  <>
    <Button onPress={lightHaptic}>Light Feedback</Button>
    <Button onPress={mediumHaptic}>Medium Feedback</Button>
    <Button onPress={heavyHaptic}>Heavy Feedback</Button>
    <Button onPress={selectionHaptic}>Selection Feedback</Button>
  </>
);
}