DioxusLabs
Portals
Specific Demand
I'm looking for something like React's Portals, but I couldn't find anything in the docs. Not sure if it's available but under a different name or simply not available yet.
Implement Suggestion
Basically the same as what React offers: https://reactjs.org/docs/portals.html
Specific Demand
I'm looking for something like React's Portals, but I couldn't find anything in the docs. Not sure if it's available but under a different name or simply not available yet.
Implement Suggestion
Basically the same as what React offers: https://reactjs.org/docs/portals.html
We don't currently have portals as a first-class-feature. But... due to how to we do reconciliation, you can re-parent a div to another div after it's been mounted.
This would work on desktop and web if you used eval to pluck the element by its ID and re-parent it to another div, with another ID.
It might take some trial and error to get it working properly - for starters, you'd want to make sure the portaled div is the only child of its parent, and to get the element properly cleaned up you might have to wire up a hook to remove the element if Dioxus doesn't do it automatically.
We will probably add this feature as a first-class feature in a future release, so we can leave this issue open until then.
Is there sth implemented by now in this regard?
https://github.com/DioxusLabs/dioxus/blob/a9468429d7181499f920be89b747a58f32727d08/packages/dioxus-lib/README.md?plain=1#L267 mentions portals as an existing feature, but I can't find anything.
Note: I am in need for this, because I am trying to port the basic components from https://github.com/radix-ui/primitives to dioxus, to allow building a nice component library
I would like to share another workaround: Anchor positioning can be used to do pretty much the same thing with CSS.
I have used it with TypeScript/Preact to build a POC nested tab system (just like VSCode) by anchoring the tab contents (in a single layer) to the nested tab windows. This way the tabs can be moved around without loosing their context (reactive state and thinks like scroll position).
Unfortunately this is web/desktop only and only works with Chrom*-based browsers/WebViews
