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.

Answer 1

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