Skip to Content
React SDKHaptic Feedback
View .md

Haptic Feedback

The Alien SDK provides haptic feedback through the host app’s native haptic engine. Trigger tactile responses for user interactions like button taps, success confirmations, and selection changes.

React Hook

function LikeButton() { const { impactOccurred, supported } = useHaptic(); if (!supported) return null; return ( <button onClick={() => { impactOccurred('medium'); // ... your logic }}> Like </button> ); }

Return Values

PropertyTypeDescription
impactOccurred(style) => voidTrigger impact feedback
notificationOccurred(type) => voidTrigger notification feedback
selectionChanged() => voidTrigger selection change feedback
supportedbooleantrue if the host app supports haptic methods

Impact Styles

Use impactOccurred(style) for general touch feedback.

StyleDescription
'light'Subtle tap — toggles, minor UI changes
'medium'Standard tap — button presses
'heavy'Strong tap — significant actions
'soft'Soft, muted tap
'rigid'Sharp, crisp tap

Notification Types

Use notificationOccurred(type) for outcome feedback.

TypeDescription
'success'Action completed successfully
'warning'Something needs attention
'error'Action failed

Selection

Use selectionChanged() for picker or scroll selection feedback.

function Picker({ items }) { const { selectionChanged } = useHaptic(); return ( <select onChange={() => selectionChanged()}> {items.map((item) => ( <option key={item.id}>{item.label}</option> ))} </select> ); }

Bridge API

For non-React apps, use the bridge directly. All haptic methods are fire-and-forget — no response event.

// Impact feedback send('haptic:impact', { style: 'medium' }); // Notification feedback send('haptic:notification', { type: 'success' }); // Selection feedback send('haptic:selection', {});

haptic:impact

{ style: 'light' | 'medium' | 'heavy' | 'soft' | 'rigid'; }

haptic:notification

{ type: 'success' | 'warning' | 'error'; }

haptic:selection

{}

Version Requirements

Haptic methods are available since contract version 0.2.4. Use useIsMethodSupported or isMethodSupported to check:

const { supported } = useIsMethodSupported('haptic:impact');

Next Steps

Last updated on