src/components/hooks/useOnGesture/index.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import {useEffect} from 'react'

import {
  type GlobalGestureEvents,
  useGlobalGestureEvents,
} from '#/state/global-gesture-events'

/**
 * Listen for global gesture events. Callback should be wrapped with
 * `useCallback` or otherwise memoized to avoid unnecessary re-renders.
 */
export function useOnGesture(
  onGestureCallback: (e: GlobalGestureEvents['begin']) => void,
) {
  const ctx = useGlobalGestureEvents()
  useEffect(() => {
    ctx.register()
    ctx.events.on('begin', onGestureCallback)
    return () => {
      ctx.unregister()
      ctx.events.off('begin', onGestureCallback)
    }
  }, [ctx, onGestureCallback])
}