How to Create Embedded React Widget

React-based applications are all over the web. Developers are highly specific about the requirements and take immense care when deploying react applications.

Without a doubt, there are plenty of React applications running successfully. However, there is still room for improvement. One thing is the fact that nearly all of those applications are designed to work in a standalone environment. This suggests that it would be difficult to embed React applications in the form of a widget

Now, this is something that restricts the usability of  React applications. Also, there aren't many articles that deal with this topic, so in order to provide the needed information, we've created this one, on the multitude of methods used to create an embedded react widget.

Embedding React - use cases

As this article is about embedding an existing React application, we won’t go into much detail on how to create said application. Before we start though we need to consider where the widget needs to be placed.

1. Embedding React in a web page

The simplest case would be embedding our application on an existing webpage. The Facebook page plugin is a great example, used all around the web to include a page’s feed or some other information straight from Facebook.

2. Embedding React in other applications

Now, embedding React components we aren't limited to web pages, we can also integrate them within other applications. All you need to do in order to embed React in an application is include them via a script tag:

Detailed Process of Creating ReactJS Widgets: iFrame Way

There are two different ways to create a ReactJS widget. You can either opt for the iFrame way or choose to use JavaScript. Either way, make sure you are all set with the following:

1. A React application that opens in your browser window
2. An HTML file in which we’ll create the iframe
3. A server for the application we’ll embed

Start your server to check if your application is running normally. Once checked, take a look at these steps to see which option you’d like to go with.

Step One: Edit the HTML File

Open your HTML file, and just write the following code inside:

It’s as simple as that! Now you have an application embedded within an iFrame.

Step Two: Choose Specific Component

In case, you want only a single component to be displayed on the HTML page, using routing you can specify where your link goes:

This renders the calendar component within the HTML page.

Simple and easy, right?

Note: if you plan to embed a widget that has to be of specific dimensions, opting for iframe serves your purpose best.

Comparing: iFrame Vs embedded React widget

As stated earlier, there are two different ways of embedding React as a widget.

The widgets as created using JavaScript involve a series of codes and modifications. If you plan to embed the components directly to the page, the iframe is the best way out.

But for developers who seek a more sophisticated integration with total control over the widget, it is best advised that they opt for an embedded React widget.

Create Embedded React widget: Using Webpack

In case, you plan to create an embedded React widget using Webpack, follow the steps given below:

1. Edit your webpack.config.js file and enter the following attributes within the output object as

The above creates the impression that you are bundling your React file with a Webpack as an umd module.

1. Export function file

1. Edit Client Side

There couldn't be an easier way.

Web Components Vs Widgets: Are they the Same?

For some, widgets and web components appear to be the same but in reality, these are two different concepts. Where both web components and widgets allow developers to embed usable components within the application, web components offer a much more streamlined interface with the ability to build core UI that runs on the standalone native environment.

Converting React Component into a Web Component

In case you are currently using a React component and plan to modify its functionality, migrating to a web component would be a good decision. Starting from scratch would only drain your resources. Hence, we outline the steps to convert your already built React component to a web-based component.

• Create HTML Shell Element
• Create a class that extends HTML element
• Register this class with the object of window.customElements.
• Invoke the connectedcallback method to mount your react on the HTML element.
• Pass the property values using attributes to the react component and on the HTML element.
• Invoke the attributeChangedCallback method to handle updates in property values.
• Add a button to raise events which need to be listened by the addEventListener
• Finally, update the code to use the library of HTML-to-react and seamlessly convert HTML markups to produce react components in case the component was a container.

Summary

Overall, there are multiple ways to create an embedded React widget in a page, site or an application. You can also encapsulate your existing React component into a web component. So, stop procrastinating and get started with the process.