How do I set window with useMouse() ?

[s7tya]

Sorry for creating an issue that is not a bug report or feature request.

How do i set window as a target of useMouse() ?
As I read the README, it looks like I can do that, but I couldn't find the way to do so.

react-hook/packages/mouse-position/README.md

Line 74 in 6c07641

| target | <code>React.RefObject&lt;T&gt; &#124; T &#124; null</code> | Yes | The React ref, `window`, or HTML element to add the event listener to |

[jaredLunde]

you can but maybe the type is incorrect. would happily accept a PR that fixes it.

[s7tya]

I think the type is not the only thing to be fixed. Like we cannot use window obj in SSR?

( I’m a beginner so it might be wrong tho🙇)

[williamstein]

Using

  const mouse = useMouse(window as any);

fails. Typescript works fine, but there is a runtime stack trace.

Uncaught TypeError: element.getBoundingClientRect is not a function
    at _ref (index.js?64c7:27:1)
    at _ref2 (index.js?64c7:71:1)
    at updateReducer (react-dom.development.js?fc10:16664:1)
    at Object.useReducer (react-dom.development.js?fc10:17898:1)
    at Object.useReducer (react.development.js?443b:1626:1)
    at useMouse (index.js?64c7:142:1)

This is using the latest version of this library in the newest version of Chrome with recent react 18.

[williamstein]

My guess is that the solution to this issue is:

• The place in the docs where it says that window is allowed as input should be removed, since window definitely does not work, since it doesn't have getBoundingClientRect, but this library assumes the input has that method.
• Mention in the docs that if you need to listen for events on the entire window, use

const mouse = useMouse(document.body);

which I think does work as one would expect with the window. This is the case of an HTMLElement type input, which works fine.

[jaredLunde]

So the types are correct