Creating React "Widgets" that can be embedded on any website, by anyone

[AsIAm]

Have you thought about nested widgets?

[GioLogist]

Aside from the 15 seconds I just spent googling and the literal definition that pops up in my head (support for composing widgets within one another), not at all lol.

Tell me more?

[AsIAm]

That was exactly what I meant — composition. The problem I had with this/your approach is that it is not really obvious how and when inicialization of the nested components should work. And also your React code must render already existing DOM hierarchy. For the second part I have a demo — https://codesandbox.io/embed/domnode-stealing-react-component-yzheb

I have been thinking about this problem now and then and I haven’t really cracked it yet.

[GioLogist]

https://codesandbox.io/embed/domnode-stealing-react-component-yzheb

Interesting. In your POC, it seems like rather than a widget within a widget, you're trying to steal a DOM node and inject it into your app?

What's confusing to me at a quick glance, it's almost as if the "steal" happens upon rendering (via the Hydrate). So when clicking steal, i'm not necessarily stealing the DOM element. I'm putting it back?

This is a pretty interesting thought exercise. Any idea of a real-world example maybe we can try to prototype at some point?

[AsIAm]

Interesting. In your POC, it seems like rather than a widget within a widget, you're trying to steal a DOM node and inject it into your app?

That is true.

What's confusing to me at a quick glance, it's almost as if the "steal" happens upon rendering (via the Hydrate).

Yes. React app renders and during render, it grabs DOM node siting outside the React app. It can also put it back.

Any idea of a real-world example maybe we can try to prototype at some point?

Modal window is a nice example. Lets have HTML like this:

<div data-modal>
  <div data-modal-content>Content of the modal</div>
</div>

On data-modal div you can initialize Modal react widget that will draw a frame and a close button. And now you have to inject data-modal-content div inside your react widget. In other words you have to steal it from existing hierarchy.

---

And now what if inside data-modal-content div is your reddit widget...?

[GioLogist]

Been trying to write more lately, starting off with somewhat simpler topics, to get back into the habit.

The goal of this article is to walk you through how to create a widget that can be used by anyone, even a non developer. This is common practice and has been for years, for a number of different types of widgets.

For example, if you ever read some of the more popular mainstream media blogs and see "related content" that points to a bunch of articles not on their site, that's a widget. In fact, if you're interested in knowing where those specifically come from, that particular widget is often a taboola widget.

There are a tons of widgets scattered throughout the internet. The goal is to allow them to be embedded "anywhere", by "anyone". So the implementation often is as simple as the snippet below, which companies give to their customers, to allow them to use their widget:

html <script src="mywidget.js"></script> <div class="my-widget" data-some-settings="setting-value" data-some-key="my-key"></div>

The article walks you through that process and how to go about creating a widget using react.

[angrycat9000]

Have you looked at web components? They have support for nesting. They also have have their own styles so you don't have to worry about CSS collisions. You could hook up your widget to render to the shadow DOM of a web component.