glodrei/docs/misc/use-cursor.mdx

useful add-ons for react-three-fiber

---
title: useCursor
sourcecode: src/web/useCursor.tsx
---

![](https://img.shields.io/badge/-Dom only-red)

A small hook that sets the css body cursor according to the hover state of a mesh, so that you can give the user 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', document.body*/)
return (
  <mesh onPointerOver={() => set(true)} onPointerOut={() => set(false)}>
```