How hide/show a widgets by code in tsx file?

Question

I am developing a closable widget in experience builder:

I would like to know what is the right way to hide/show a widget in experience builder,
I currently hide the render inside widget.tsx file in React but the widget container (.is-widget) still displays:

This makes it impossible to move the basemap in that section where the widget is.

Currently what I do is look for this container and change CSS pointer-events property (post from I found this idea ) to none, but its hacky.

Any idea how I can hide/show a widget correctly?

JeffreyThompson2 · Answer

The best solution here would be to place your widget in a Widget Controller (or a Sidebar). You could configure the Widget Controller to launch your widget on load and to load at a fixed location. And the Widget Controller would also handle the logic to dismiss the widget.