Looking for the old docs? Go here

Display

Gesture

This component enables actions to be performed on the media based on user gestures.

The event property seen in the snippets above can be any valid DOM event type (e.g., touchstart, mouseleave, etc.). An event listener is attached to the given event type on the media provider, and when fired, it will trigger the action on the media provider.

In addition, any event can be prefixed with dbl (e.g., dblpointerup) to ensure it’s fired twice in succession (within 200ms) before the gesture action is triggered.

Any gesture can be prevented from triggering by calling event.preventDefault() on the will trigger event like so:

  
    
  
HTMLAttributes
Ref<GestureInstance>

This component enables actions to be performed on the media based on user gestures.

import { Gesture, type GestureProps } from "@vidstack/react";
import { Gesture, type GestureProps } from "@vidstack/react";
<Gesture event="pointerup" action="toggle:paused" />
<Gesture event="dblpointerup" action="toggle:fullscreen" />
<Gesture event="pointerup" action="toggle:paused" />
<Gesture event="dblpointerup" action="toggle:fullscreen" />
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
action
GestureAction
undefined
disabled
boolean
false
event
GestureEventType
undefined
CallbackType
onTrigger
function
onWillTrigger
function

Previous