Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useIntersection: Update docu or differentiate between option-parameters #245

Open
FlxAlbroscheit opened this issue Nov 30, 2022 · 1 comment

Comments

@FlxAlbroscheit
Copy link

As I was just working on a class that implements useIntersection, I wondered whether there is any way to pass the "threshold"-parameter to the underlying IntersectionObserver-class (see available options on MDN), as I was going to need some delay before appear and disappear-callbacks are being executed.

Turns out: It is indeed possible by simply adding "threshold" to the options-parameter of useIntersection (e.g. useIntersection(this, { threshold: 0.8 })). The official use-intersection docu does not mention anything about this possibility, instead it just mentions the stimulus-use-relevant options that are available. However, these options are simply passed further to new IntersectionObserver(...), as can be seen here and in the TypeScript-defintion of IntersectionOptions. The browser then probably simply "ignores" the options which are stimulus-use-specific, which is fine on the one hand, but a little bit verbose on the other.

I propose at least two ways to deal with this issue:

  1. Add in the documentation of useIntersection the possibility to pass non-stimulus-use-specific options that are then passed further to create the internal IntersectionObserver instance (e.g. rootMargin or threshold).
  2. Differentiate between options that are meant for useIntersection and those meant for IntersectionObserver.
@adrienpoly
Copy link
Contributor

Fully agree with that I had the same use case recently and had to look to the source code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants