Render something outside of Stage using portals?

[marcoripa96]

Is it possible in any way to use Portals to render something inside the <Stage /> from outside the <Stage/>?

For example:

Scene.tsx

function Scene({children}) {
   return (
      <Stage>
         <Layer id="main-layer">
             {children}
         <Layer />
      </Stage>
   )
}

SiblingSceneComp.tsx

function SiblingSceneComp(props) {
   return (
      <Portal selector="#main-layer">
         <Rect {...props} />
      </Portal>
   )
}

[lavrton]

No, Portal is not designed for that. What is your use case?

[marcoripa96]

Just to have locality of state without actually having global state.

For example imagine a sidebar that toggles something inside the konva stage. The two components might be siblings as in my case and I would keep the state in the sidebar but render something inside the stage

[lavrton]

I see. Well, to me, it sounds a bit strange and a global state should do a much better work.

[marcoripa96]

Well, it depends on the structure of the code and how complex the components around the konva stage are. Having a global state with every option could potentially trigger expensive rerenders