ReactJS right click (contextmenu) handler

RightClick.js

import { createElement, useEffect, useRef } from 'react'

const RightClick = ({ as = 'div', onRightClick, children, ...rest }) => {
  const ref = useRef()

  useEffect(() => {
    const handler = e => {
      e.stopPropagation()
      e.preventDefault()
      onRightClick(e)
    }

    const instance = ref.current // Capturing mutation in order to have reference in "unmount", thanks to @vavdav
    // @ts-ignore
    instance.addEventListener('contextmenu', handler)

    // @ts-ignore
    return () => instance.removeEventListener('contextmenu', handler)
  })

  return createElement(
    as,
    {
      ...rest,
      ref
    },
    children
  )
}


export default RightClick