add dragHandleRef: To allow for a ref to be passed in to be used as the Drag Handle

index.d.ts

@@ -79,6 +79,11 @@ declare interface Props {
    * HTML attribute class
    */
   className?: string
+
+  /**
+   * Optional Drag Handle Ref
+   */
+   dragHandleRef?: React.Ref<API>
 }
 
 declare const TinderCard: React.FC<Props>

index.js

@@ -142,12 +142,16 @@ const mouseCoordinatesFromEvent = (e) => {
   return { x: e.clientX, y: e.clientY }
 }
 
-const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled }, ref) => {
+const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled, dragHandleRef = null }, ref) => {
   settings.swipeThreshold = swipeThreshold
   const swipeAlreadyReleased = React.useRef(false)
 
   const element = React.useRef()
 
+  if (!dragHandleRef) {
+    dragHandleRef = element
+  }
+
   React.useImperativeHandle(ref, () => ({
     async swipe (dir = 'right') {
       if (onSwipe) onSwipe(dir)
@@ -208,13 +212,13 @@ const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, o
     let mouseIsClicked = false
     let swipeThresholdFulfilledDirection = 'none'
 
-    element.current.addEventListener(('touchstart'), (ev) => {
+    dragHandleRef.current.addEventListener(('touchstart'), (ev) => {
       ev.preventDefault()
       handleSwipeStart()
       offset = { x: -touchCoordinatesFromEvent(ev).x, y: -touchCoordinatesFromEvent(ev).y }
     })
 
-    element.current.addEventListener(('mousedown'), (ev) => {
+    dragHandleRef.current.addEventListener(('mousedown'), (ev) => {
       ev.preventDefault()
       mouseIsClicked = true
       handleSwipeStart()
@@ -241,32 +245,32 @@ const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, o
       lastLocation = newLocation
     }
 
-    element.current.addEventListener(('touchmove'), (ev) => {
+    dragHandleRef.current.addEventListener(('touchmove'), (ev) => {
       ev.preventDefault()
       handleMove(touchCoordinatesFromEvent(ev))
     })
 
-    element.current.addEventListener(('mousemove'), (ev) => {
+    dragHandleRef.current.addEventListener(('mousemove'), (ev) => {
       ev.preventDefault()
       if (mouseIsClicked) {
         handleMove(mouseCoordinatesFromEvent(ev))
       }
     })
 
-    element.current.addEventListener(('touchend'), (ev) => {
+    dragHandleRef.current.addEventListener(('touchend'), (ev) => {
       ev.preventDefault()
       handleSwipeReleased(element.current, speed)
     })
 
-    element.current.addEventListener(('mouseup'), (ev) => {
+    dragHandleRef.current.addEventListener(('mouseup'), (ev) => {
       if (mouseIsClicked) {
         ev.preventDefault()
         mouseIsClicked = false
         handleSwipeReleased(element.current, speed)
       }
     })
 
-    element.current.addEventListener(('mouseleave'), (ev) => {
+    dragHandleRef.current.addEventListener(('mouseleave'), (ev) => {
       if (mouseIsClicked) {
         ev.preventDefault()
         mouseIsClicked = false

readme.md

@@ -129,6 +129,13 @@ Callback that will be executed when a `TinderCard` has unfulfilled the requireme
 
 HTML attribute class
 
+### `dragHandleRef`
+
+- optional
+- type: `React.Ref<API>`
+
+React Ref to a Drag Handle
+
 ## API
 
 ### `swipe([dir])`