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()`

How to generate user specific images in the Farcaster Mini App

How to use the React Native Privy embedded wallet template

⌘I

Introduction

Developer Essentials

Tooling and Infrastructure

Reference

Guides

Resources

How to add haptics to a Farcaster Mini App

Implementing haptics in a Farcaster Mini App

Supported haptics

​Implementing haptics in a Farcaster Mini App

​Supported haptics

Implementing haptics in a Farcaster Mini App

Supported haptics