Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor wordpress + React or Angular

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.

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search