Custom Elementor Widget using React

custom-widget.php

<?php
//widgets/custom-widget.php
class Custom_Widget extends \Elementor\Widget_Base {
    public function get_name() {
        return 'custom_widget';
    }

    public function get_title() {
        return __('Custom Widget', 'my-plugin');
    }

    public function get_icon() {
        return 'eicon-upload';
    }

    public function get_categories() {
        return ['general'];
    }

    protected function render() {
        echo '<div id="custom-widget-container">Loading...</div>';
    }
}

index.js

//src/index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import WidgetComponent from './widgets/WidgetComponent/WidgetComponent';

const bootstrap = () => {
  const container = document.getElementById('custom-widget-container');
  if (container) {
    const root = createRoot(container);
    root.render(<WidgetComponent />);
  }
};

if (window.jQuery) {
  jQuery(document).ready(function () {
    if (window.elementor && window.elementorFrontend) {
      window.elementorFrontend.hooks.addAction('frontend/element_ready/custom_widget.default', bootstrap);
    } else {
      bootstrap();
    }
  });
} else {
  bootstrap();
}

plugin.php

<?php
/**
 * Plugin Name: Custom Elementor Widgets
 * Description: A collection of Elementor widgets.
 * Version: 1.0.0
 * Author: Your Name
 * Text Domain: mu-plugin
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

function custom_widgets_register_widget($widgets_manager) {
    require_once plugin_dir_path(__FILE__) . 'widgets/custom-widget.php';
    $widgets_manager->register(new \Custom_Widget());
}
add_action('elementor/widgets/register', 'custom_widgets_register_widget');

function enqueue_custom_widgets_script() {
    wp_enqueue_script('custom-widgets-script', plugin_dir_url(__FILE__) . 'dist/main.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_widgets_script');