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
- A React application that opens in your browser window
- An HTML file in which we’ll create the iframe
- 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.
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:
- 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.
- Export function file
- 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
- Invoke the
connectedcallbackmethod 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
attributeChangedCallbackmethod 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.
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.
If you need help with development, check out our React team of experts.