SolidJS

Use Solid's mount and cleanup lifecycle with the framework-independent API.

import { createEffect, onCleanup, onMount } from "solid-js";
import { createGlobe } from "canvas-globe";

export function CustomerGlobe(props) {
  let canvas;
  let globe;

  onMount(() => {
    globe = createGlobe(canvas, {
      licenseKey: "your_license_key",
      markers: props.markers,
      preset: "hologram",
      tooltip: true,
    });
  });

  createEffect(() => globe?.setMarkers(props.markers));
  onCleanup(() => globe?.destroy());

  return <canvas ref={canvas} style={{ width: "100%", "aspect-ratio": 1 }} />;
}

Construct only after the canvas exists and keep CSS sizing explicit.