Intégrer un widget sous REACT

Introduction

Ce tutoriel technique vous permettra d’intégrer votre widget dans un environnement « React Habitat » (https://github.com/DeloitteDigitalAPAC/react-habitat).

Cas A – Version PHP (recommandé)

Récupérez le code d’insertion PHP depuis votre interface de gestion de widgets, il devrait ressembler à ça :

<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Rien de plus à faire.

Cas B – Version JavaScript (composant React)

  1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets.
  2. Commençons par créer le composant React qui va être inséré dans la page :
    Cirkwi.jsx (où XXX est l’identifiant du widget)
import React from 'react';

class Cirkwi extends React.Component {
    render() {
        mbLoadModule({ id: XXX, locale: "fr" });
        return (
            <div>
                <div id="mb-module-XXX"></div>
            </div>
        );
    }
}

export default Cirkwi;
  1. Votre composant est maintenant créé, il faut alors le déclarer dans le containerBuilder.
containerBuilder.registerAsync(() => System.import('./components/Cirkwi')).as('RCirkwi');
  1. Dans votre code PHP, juste avant de charger votre composant, insérez la balise Javascript contenant le script nécessaire au bon fonctionnement du widget.
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
[...]
<div data-component="RCirkwi"></div>
[...]

N’oubliez pas de « build » votre projet ! Une fois ceci fait, le composant est correctement installé.