How to add haptics to a Farcaster Mini App

Haptics are a way to add tactile feedback to your app to enhance user interaction and responsiveness.

This guide walks you through implementing haptics in a Farcaster Mini App for a more intuitive and engaging user experience.

Implementing haptics in a Farcaster Mini App

If you are using the Monad Mini App template, you can use haptics from the useFrame hook.

If you are not using the Monad Mini App template, you can inspect the useFrame hook to check out the implementation details.

Below is an example of how to implement haptics in a Farcaster Mini App:

...

export default function MyComponent() {
  const { haptics } = useFrame();

  return (
    <div>
      <button onClick={() => haptics.impactOccurred('light')}>Light Impact</button>
    </div>
  );
}

Supported haptics

The following haptics are supported:

Haptic Type	Code
Light Impact	haptics.impactOccurred('light')
Medium Impact	haptics.impactOccurred('medium')
Heavy Impact	haptics.impactOccurred('heavy')
Soft Impact	haptics.impactOccurred('soft')
Rigid Impact	haptics.impactOccurred('rigid')
Success Notification	haptics.notificationOccurred('success')
Warning Notification	haptics.notificationOccurred('warning')
Error Notification	haptics.notificationOccurred('error')
Selection Change	haptics.selectionChanged()