Clojurians Log v2

(defn modal [& {:keys [bg-render fg-render]}]
  (if-not fg-render
    [bg-render]
    [:div
     [bg-render]
     [:div.modal.is-active
      [:div.modal-background]
      [:div.modal-content
       [:div.box.is-clipped
        [fg-render]]]]]))

It's definitely worse than toggling display or visibility or moving the whole modal off screen. But it's alright if you don't have very complex contents that take a noticeable time to render. Also, your approach won't work properly for something that needs to maintain its own state. Just as an example Bokeh plots/documents maintain their own WebSocket connection. The have to be disposed of in a completely different way - just removing the DOM node will lead to all sorts of errors.

Ok, interesting. I’m using re-frame so the idea that the ui is derived from the app state is what’s in my head. I haven’t been thinking of components as things with substance. It sounds like I’m throwing away my fg-render component as a substitute for better control flow logic.

I don't see how

(when show-component?
  [component])

[:div {:style (when-not show-component? {:display :none}}
  [component]]

You don’t have to know about html or css in the first case.

That's a very leaky abstraction you're treading. ;)

I don’t have a background in html or css. That’s going to influence how I solve the problem. I’m still trying to learn the best practices and develop a mental model for what’s really happening. i.e. How much work is happening behind what I’m asking reagent to do.

You mean that I’m coupling the thing that provides fg-render to whether or not it should show?

I'm afraid the best, first, and foremost practice in frontend development is to learn the basics. And only then build on top of those abstractions. Right now you're at the top of a very high tower: Reagent -> (via CLJS) -> React -> DOM + JS/HTML/CSS. Without knowing at least the basics of the underlying components, it's would be incredibly hard to achieve something.

> You mean that I’m coupling the thing that provides fg-render to whether or not it should show? No, that doesn't bother me at all.

Sorry, what’s the leaky abstraction?

Writing frontend code without dealing with HTML and CSS at all.

I’m not trying to avoid html or css. However, if there’s an alternate way to solve the problem then I’m might do that first. And then like here, I’ll wonder if I don’t have the best practice.

Anyways, thanks for the feedback!

If you’re using React (Reagent) then I would recommend checking out portals. They were designed for scenarios like this. Of course, I may be making assumptions about what you have/have not done and for this I apologize! 🙏

Thanks! I haven’t looked at portals yet so I’ll check that out. I appreciate the suggestion.

i second the portal suggestion, the one time that i have used them i was pleased with how well they worked