Implementing with "document" as a target in a Gatsby project using useEffect

[adamatronix]

Hi,

I checked out the documentation where in past versions you were able to do something like:
const wheel = useWheel({...},{ target: document }) useEffect(wheel, [wheel])

However now it says the hook will do the clean up itself. Basically I need to check when "document" or the dom has loaded as during a Gatsby build non is available. I would like to run it in a useEffect.

Thanks

[dbismut]

What would you want to run in useEffect? Not sure I understand, that doesn't make much sense to me sorry.

[dbismut]

Hm but listeners are added in an effect hook internally so I'm not sure what's going on. I'm on my phone I'll have a look when I'm back home.

[adamatronix]

Sure np.

[dbismut]

Yeah one way to solve this would be to have target accept a function (like { target: () => document }). Until then, you can just use the usual typeof document !== 'undefined' ? document : undefined as I think you mentioned.

Also note that the previous version of use-gesture wouldn't have solve this. The sheer fact that your code mentions a non defined object in its render function at build time makes the SSR build crash.

[adamatronix]

Cool. Yea ended up just adding a conditional around the hook.

[dbismut]

Note that you shouldn't write a conditional around the hook. That goes against the Rules.