0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-20 22:12:38 -05:00
astro/.changeset/stupid-peas-juggle.md
Mads Erik Forberg 769826edbd
feat: support setting rootMargin for client:visible (#9363)
* feat: support setting rootMargin for `client:visible`

This support adding optional `rootMargin` to the `IntersectionObserver` options.

This gives the developer the optional choice to hydrate a bit before the astro-island enters the viewport.

* chore: update type for client:visible

* chore: added changeset

* chore: update types

* fix: check if value is string

* Update stupid-peas-juggle.md

* fix: update .changeset/stupid-peas-juggle.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
2024-01-03 13:20:07 +00:00

354 B

astro
minor

Extends the client:visible directive by adding an optional rootMargin property. This allows a component to be hydrated when it is close to the viewport instead of waiting for it to become visible.

<!-- Load component when it's within 200px away from entering the viewport -->
<Component client:visible="200px" />