Skip to content
GeoViewer 5

React

Approche recommandée

La voie la plus stable en React est d’utiliser le Web Component (geoviewer-esri-element) et de le rendre dans votre arbre React.

Pré-requis: le script Geoviewer doit être chargé (voir Web Component via balise <script>).

Exemple

import { useEffect, useRef } from 'react';


export function GeoviewerReact() {
    const hostRef = useRef<HTMLDivElement>(null);


    useEffect(() => {
        if (!hostRef.current) return;


        const el = document.createElement('geoviewer-esri-element') as any;
        hostRef.current.appendChild(el);


        return () => el.remove();
    }, []);


    return <div ref={hostRef} style={{ width: '100%', height: '100vh' }} />;
}

Points d’attention

  • Le Web Component a besoin d’une hauteur non nulle (ex: height: 100vh ou un conteneur flex qui s’étire).
  • Si vous utilisez une IIFE auto-hébergée, vous pouvez passer loadingOptions sur l’élément (voir Options de chargement).

Aller plus loin