Is rootMargin working?

In the recipe for lazy loading images here https://github.com/thebuilder/react-intersection-observer/blob/master/docs/Recipes.md#lazy-image-load I haven’t been able to observe any effect related to rootMargin

This is, images were loading always when barely seen, not before or after

How is this supposed to work?

*In the link example in https://codesandbox.io/embed/lazy-image-load-mjsgc one has to "false"fy the native image loading browser capabilities to test this - in both files (and remove the loading prop)

 const supportsLazyLoading = false;

And the margin has also to be corrected to rootMargin (I assume)

EDIT: I can see that it is working in other examples where I am triggering animations, but with the one of images It seems to be ignored (?)

[Zloka]

@thebuilder I went over how I assigned root and noticed a mistake. Lesson learned, don’t code (or raise issues) while tired. Thanks for the quick reply and handy useInView hook, works as expected now 😌

[thebuilder]

@juanpprieto I seem to be running into the same issue you described. Do you happen to have a code snippet to share? I can’t seem to wrap my head around it 🙁

• Are you setting root?
• Is it rendered inside an <iframe>?

Can you share the an example on Codesandbox?