feat(@toss/react): Add root Props ImpressionArea

[ssi02014]

Overview

I worked on adding "root" props to the "Impression Area".
"root" props is one of the default options for "Intersection Observer". How about adding a corresponding "root" prop?

I think it's better to cover a wider range of cases by providing a default option that can be utilized.

For example, The root option has issues with iframes.

Of course, by default, the Viewport is applied as root (null), which I agree is appropriate in most cases. So, it would be great if you could review it.

Also, I don't think the code I've been working on will cause problems with older versions of the code. 🤗

PR Checklist

• I read and included theses actions below

1. I have read the Contributing Guide
2. I have written documents and tests, if needed.

[netlify]

👷 Deploy request for slash-libraries pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	644b121

[okinawaa]

This is a good improvement.

What kind of situation did you actually need to give a root to?(in real programming)

Could you write a test code to verify this change?

[ssi02014]

@ChanhyukPark-Tech
In fact, root is an option that most of the time is not needed in real programming..!

However, I recently had an experience with storybook where rootMargin didn't work because I didn't specify root.
when I specified root as document, "rootMargin" worked fine.

(Not exactly a storybook issue, but more of an iframe issue🤮)

Please refer to the following videos that I shared! 🙏

root: null (Unusual behavior 🥲)

ezgif.com-gif-maker.7.mov

root: document (Normal behavior 😄)

ezgif.com-gif-maker.8.mov

I found a documentation related to the issue.

• Usage in Storybook thebuilder/react-intersection-observer#339
• IntersectionObserver rootMargin ignored within iframe w3c/IntersectionObserver#283 (comment)

Looking at this issue again, I see that I gave a completely bogus answer to the initial question. It's NOT true that root margin is only applied for the same-document case (and the spec doesn't say that). Root margin will be applied in the same-origin cross-document case (i.e., target element inside a same-origin iframe, and observer using the implicit root).

However, the root margin is only applied to the top-level container, which in the case of the implicit root is the scrolling viewport of the top-level document. The iframe element is also a clipping container, and the root margin is NOT applied when computing clipping from the iframe element's boundary.

If you want the root margin to apply to the iframe element's boundary, then you'll have to use an observer with an explicit root, which should be document.scrollingElement within the iframe. If you also need to compute intersection with the top-level viewport (the implicit root), that will require a second observer.

Solution

const observer = new IntersectionObserver(callback, {
  root: document, // (*)
  rootMargin: '300px 0px 300px 0px',
});

Additionally, in my opinion, it seems quite difficult to write test code with the root option applied using the existing test code settings… 😱

As a result, There's a clear problem with storybook(actually iframe), adding the root option doesn't have any side effects, and it's the default option for Intersection Observer, so I don't think it's a bad idea to add it.

[okinawaa]

Thank you for preparing a good example and reference and producing this pr.

Someone might need this option

[ssi02014]

@ChanhyukPark-Tech
I'm glad this pull request got approved and merged.
Also, thanks for your review. 🙂

[okinawaa]

@ssi02014
I learn a lot from you because you always create good PR. Thank you!😄