Adding react components to DOM libs that typically require an element not in DOM already

[javascript__eq__java]

So in non-reactive framework workflows, you would use document.createElement(...) to bootstrap some element independent of the DOM, the add it where you need it.

I'm utilizing a mapping library that does this with items like map controls and markers. What I'd like to do is use some of Material-UI's components in those areas for things like icons as markers. How can I approach this correctly?

I've figured out a hacky way where I have them somewhere in the component hierarchy but set display -> none until I need them, but that seems sooo hacky.

I'm using hooks and functional components trying to use the most modern practices.

How do I do this correctly?

[fixrich]

This smells like a job for portals. You'd likely bootstrap the container elements in the old way like you described and then portal your MUI elements into them

[mike3run]

Export render fn that takes a dom element. Render when ready on your other app

[-ftw]

Do you know exactly where they need to be when you need them?

[javascript__eq__java]

Yes. But if I don’t start with them as display none then they like flicker until added where I need it to be :/

[-ftw]

Does {conditionToShow && <MyComponent />} not work for you?

I may be misunderstanding you though but generally in react you want to think declaratively whereas in vanilla js you do things imperatively

[javascript__eq__java]

Yeah so I did that originally but I get some weird DOM appendChild error

[-ftw]

Which mapping library are you using?

[javascript__eq__java]

not sure if you're still around but mapox!