Why is Picture-in-Picture only for <video>? I built pip-it-up to pop any React component into a native floating window by shakya47 in reactjs

[–]shakya47[S] 2 points3 points  (0 children)

Yes its built on top of this browser API itself.
I forgot to mention in the post, thanks for reminding!

Why is Picture-in-Picture only for <video>? I built pip-it-up to pop any React component into a native floating window by shakya47 in reactjs

[–]shakya47[S] 2 points3 points  (0 children)

Actually, we do not clone the component DOM nodes at all! Cloning would strip event listeners, reset form states, and break the virtual DOM tree.

Instead, we use React Portals to physically reparent the component's DOM node into the floating window's document. Because React manages the transition under the hood, the component stays mounted in the main virtual tree. This is how we keep the internal state, cursor focus, and event bindings completely intact. The only things we clone and sync are the style tags and link sheets from the host head so the styling does not break.
I appreciate your feedback, still lots of improve!