useHaptics

Touch feedback built on React Native's Vibration, so it needs no extra package. Pass enabled false, for example from a settings switch, and every call does nothing. Android follows the patterns exactly; iOS only offers a single fixed buzz for any pattern, so for finer iOS feedback swap the bodies for expo-haptics. Works in React and in React Native with no extra packages.

Installation

CLI

npx @modus-ui/cli add use-haptics

Manual

1. Copy the code from the code tab, using the React or React Native switch for your project.
2. Create a file at components/ui/use-haptics.ts.
3. Paste the code.

The CLI installs the React Native version in an Expo or React Native app and the React version everywhere else. In a project that targets both, keep the React file use-haptics.ts and the React Native file use-haptics.native.ts side by side and import ./use-haptics; Metro picks the .native file on its own.

Usage

import { Pressable, Text } from "react-native";
import { useHaptics } from "@/components/ui/use-haptics";

export default function SaveButton() {
  const haptics = useHaptics();

  return (
    <Pressable onPress={() => haptics.success()}>
      <Text>Save</Text>
    </Pressable>
  );
}

API