react-hook
react-hook copied to clipboard
How do I set `window` with `useMouse()` ?
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.
https://github.com/jaredLunde/react-hook/blob/6c076415273124feffd5c1aae62152e1b199749f/packages/mouse-position/README.md?plain=1#L74
you can but maybe the type is incorrect. would happily accept a PR that fixes it.
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🙇)
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.

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.
So the types are correct