Add example for dragover event handling

Author: haywirez

Diff for: example/src/demos/FileDragDrop.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { a, useSpring } from '@react-spring/three'
+import { OrbitControls } from '@react-three/drei'
+
+export default function Box() {
+  const [active, setActive] = useState(0)
+  // create a common spring that will be used later to interpolate other values
+  const { spring } = useSpring({
+    spring: active,
+    config: { mass: 5, tension: 400, friction: 50, precision: 0.0001 },
+  })
+  // interpolate values from commong spring
+  const scale = spring.to([0, 1], [1, 2])
+  const rotation = spring.to([0, 1], [0, Math.PI])
+  const color = active ? spring.to([0, 1], ['#6246ea', '#e45858']) : spring.to([0, 1], ['#620000', '#e40000'])
+  return (
+    <Canvas>
+      <a.mesh
+        rotation-y={rotation}
+        scale-x={scale}
+        scale-z={scale}
+        onDragOverEnter={() => setActive(1)}
+        onDragOverLeave={() => setActive(0)}>
+        <boxBufferGeometry />
+        <a.meshBasicMaterial color={color} />
+      </a.mesh>
+      <OrbitControls />
+    </Canvas>
+  )
+}

Diff for: example/src/demos/index.tsx

@@ -4,6 +4,7 @@ const Animation = { Component: lazy(() => import('./Animation')) }
 const AutoDispose = { Component: lazy(() => import('./AutoDispose')) }
 const ClickAndHover = { Component: lazy(() => import('./ClickAndHover')) }
 const ContextMenuOverride = { Component: lazy(() => import('./ContextMenuOverride')) }
+const FileDragDrop = { Component: lazy(() => import('./FileDragDrop')) }
 const Gestures = { Component: lazy(() => import('./Gestures')) }
 const Gltf = { Component: lazy(() => import('./Gltf')) }
 const Inject = { Component: lazy(() => import('./Inject')) }
@@ -30,6 +31,7 @@ export {
   AutoDispose,
   ClickAndHover,
   ContextMenuOverride,
+  FileDragDrop,
   Gestures,
   Gltf,
   Inject,