[Frontend] Using Hammerjs in React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export const useGesture = (func) => {
  const ref = useRef(null)

  useEffect(() => {
    if (ref.current) {
      const hammer = new Hammer(ReactDOM.findDOMNode(ref.current))
      hammer.add(new Hammer.Press({ event: 'longpress', time: 500 }))
      //hammer.get('swipe').set({ direction: Hammer.DIRECTION_ALL })
      hammer.on('swipe', () => func?.())
    }
  }, [ref, func])

  return ref
}

Bind returned ref to desired element using createRef(), useRef(), forwardRef().