Elementor wordpress + React or Angular

Question

I already look in google but didnt find nothing...

Please, its possible create an Elementor (Wordpress) widget with react or angular? I need to create a component which will get some data from an api and render the page dynamically. I thought about web application or Iframe, but i am not sure.

Thank you.

This is a very general question. Please explain what you need to do with more details. — MEDZ, Dec 16 '19 at 21:52
Sorry, I know its a general question. But i work with the marketing department, and they really like wordpress and I dont know php and wp environment. They want to still using wordpress to make the layout of landing pages but sometimes they need complex things that I believe its better to do with a modern framework. Searching yesterday i didtn find nothing about using react or angular embeded in a wordpress page. — Fernando Quinteiro, Dec 17 '19 at 12:43

score 2 · Accepted Answer · answered Dec 17 '19 at 00:06

It is possible with React. With more details, I could help you a little more. But in general this is the way to do it.

For your widget, echo a div with a unique id. Per example:

<div id="myReactWidget"></div>

In react, you usually see this to render the app:

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {   
  render() {
    return (
      <div>
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Well, if you replace "root" by "myReactWidget" it will be rendered in your Elementor widget.

Example:

This:

render(<App />, document.getElementById('root'));

Replaced by:

render(<App />, document.getElementById('myReactWidget'));

Please note that you have to enqueue your build reactjs script for this to work

For this please run in your project root directory:

npm run build

And take a look at the /build folder to see what to include

Thanks, Its a good ideia, but after building, where I need to copy the build directory? Inside the plugin created with elementor widget? — Fernando Quinteiro, Dec 17 '19 at 19:30
Well it depends, but yeah you can put it inside the widget folder if you wish. After you can enqueue them with the common WordPress hooks. — jbergeron, Dec 17 '19 at 19:58
What about to handle changes from controllers to React components? — juanObrach, Jul 31 '20 at 18:02

score 0 · Answer 2 · edited Sep 17 '21 at 02:55

0

There are several issues to solve for this to work effectively such as State management between Elementor Widgets, CSS isolation between the React application and Elementor and how to manage props between these two ... I tried to provide an answer to these questions via an NX plugin

https://www.npmjs.com/package/@betrue/react-elementor

Based on NX workspace pattern they will generate react.js components wrapped by web components tags isolated by shadow DOM, state is shared using redux.

The plugin will generate a starting code base to answer most of these questions.

edited Sep 17 '21 at 02:55

Carl Brubaker

1,602
11
26

answered Sep 16 '21 at 17:50

alizarion

1

I think your plugin sounds like an amazing solution for a project I'm working on. However, when I try to package the plugin, it keeps giving me an error and I can't make it past that point :/ Any recommendations? (`ERROR in ./libs/ui/src/lib/web-component-wrapper/web-component-wrapper.tsx:22:30`) – Alfie Robles Sep 28 '22 at 14:17

score 0 · Answer 3 · answered Oct 21 '22 at 13:05

Indeed the solution proposed by @jbergeron actually work. But you're half way there. If you are trying to render, let's say a react app in another application/html_page that uses its own theming/styling etc, having this there maybe cause styling issues. There's a solution to isolate the react app so it will not interfere with the rest of the page, in your case elementor.

The key phrases for you are, shadow DOM and web components.

You can follow this guide to prepare react for this.

It's so generic that you can also combine it with a library such as MUI

Elementor wordpress + React or Angular

3 Answers3