reagent 2023-03-11 | Slack Archive

Matthew Downey23:03:55

Hey all. I'm writing a browser extension for a web page that I don't control. There's some existing HTML into which I'd like to render a react component, and ideally I'd like to mix and match new react components with existing elements. Is this possible? So the page looks something like this

<div class="container">
  <div class="header">...</div>
  <div class="content">...</div>
</div>

And I want to do something like the following, once the page loads:

(let [ele (first (js/document.getElementsByClassName "container"))
      header (first (.getElementsByClassName ele "header"))
      content (first (.getElementsByClassName ele "content"))]
  (rdom/render
    [:div
     header ; <- use the existing header somehow
     [:p "Some new thing before the content"]
     content] ; <- use the existing content somehow
    ele))

Of course, this is not possible, because the references to header and content are references to real elements, not valid react children. Is there some clever way to accomplish this with refs? From what I can tell they only help in the reverse direction.

p-himik11:03:07

You can get the outerHTML of header and content and embed them via the :dangerouslySetInnerHTML {:__html html} attribute.

Matthew Downey17:03:33

Belated thank you @U2FRKM4TW, this did the trick!

👍 2

2023-03-11

Channels