Is the default prop "root" of "InView" is "Document"?

[xyy94813]

I don't see any configuration that specifies that the default root is Document.

react-intersection-observer/src/InView.tsx

Lines 70 to 74 in 975bff0

	static defaultProps = {
	threshold: 0,
	triggerOnce: false,
	initialInView: false,
	};

root
The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null.
-- from MDN https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

For Intersection Observer, "root option can be a Document" is new feature.
It does not have good compatibility.

So I need to determine the issue to the point where I need to customize an InView component.

[thebuilder]

The default value is whatever the browser sets as the default, which is the browser viewport.

If root is null, then the owning document is used as the root, and the bounds its viewport (that is, the visible area of the document) are used as the root bounds.
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root

I think the one you're looking at, is for handling a child document (e.g. iframe).

[eric-cortes]

Do you know where i can find an example on how to use a div container as root?

Something like this:

const [ref, inView, entry] = useInView({
threshold: 0,
triggerOnce: true,
rootMargin: '-50px 0px',
root: typeof document !== 'undefined' ? document.querySelector('.testwrap') : undefined
});

I would appreciate any help

[thebuilder]

I would just add a useRef() to assign a ref to the <div>. You can then pass the ref.current to root.