feat: usecursor

README.md

@@ -94,6 +94,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#usedetectgpu">useDetectGPU</a></li>
           <li><a href="#usehelper">useHelper</a></li>
           <li><a href="#useaspect">useAspect</a></li>
+          <li><a href="#usecursor">useCursor</a></li>
         </ul>
         <li><a href="#loading">Loaders</a></li>
         <ul>
@@ -905,6 +906,17 @@ return (
     <meshBasicMaterial map={imageTexture} />
 ```
 
+#### useCursor
+
+A small hook that sets the css body cursor according to the hover state of a mesh, so that you can give the use visual feedback when the mouse enters a shape. Arguments 1 and 2 determine the style, the defaults are: onPointerOver = 'pointer', onPointerOut = 'auto'.
+
+```jsx
+const [hovered, set] = useState()
+useCursor(hovered, /*'pointer', 'auto'*/)
+return (
+  <mesh onPointerOver={() => set(true)} onPointerOut={() => set(false)}>
+```
+
 # Modifiers
 
 #### CurveModifier

src/web/index.ts

@@ -1,5 +1,5 @@
 export { Html } from './Html'
-
+export { useCursor } from './useCursor'
 export { Loader } from './Loader'
 
 export * from '../core'

src/web/useCursor.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+export function useCursor(hovered: boolean, onPointerOver = 'pointer', onPointerOut = 'auto') {
+  React.useEffect(() => {
+    if (hovered) {
+      document.body.style.cursor = onPointerOver
+      return () => void (document.body.style.cursor = onPointerOut)
+    }
+  }, [hovered])
+}