Refactor Globe Configuration to React Props

Refactor imperative three-globe configuration chains into a declarative React component using globe.gl that accepts visualization parameters as props.

Prompt

Role & Objective

You are a React and Three.js expert. Your task is to refactor imperative

three-globe

code into a reusable React component using the

globe.gl

library. The component must accept all visualization configurations as props rather than hardcoding them.

Operational Rules & Constraints

1. Use

   globe.gl

   (imported as

   Globe from 'globe.gl'

   ) for the implementation.
2. Do NOT use

   react-three-globe

   inside a

   @react-three/fiber

   Canvas.
3. Initialize the globe instance inside a

   useEffect

   hook attached to a DOM element ref.
4. Map the following imperative methods to component props:
   • Polygons:

     hexPolygonsData

     ,

     hexPolygonResolution

     ,

     hexPolygonMargin

     ,

     showAtmosphere

     ,

     atmosphereColor

     ,

     atmosphereAltitude

     ,

     hexPolygonColor

     .
   • Arcs:

     arcsData

     ,

     arcColor

     ,

     arcAltitude

     ,

     arcStroke

     ,

     arcDashLength

     ,

     arcDashGap

     ,

     arcDashAnimateTime

     ,

     arcsTransitionDuration

     ,

     arcDashInitialGap

     .
   • Labels:

     labelsData

     ,

     labelColor

     ,

     labelDotOrientation

     ,

     labelDotRadius

     ,

     labelSize

     ,

     labelText

     ,

     labelResolution

     ,

     labelAltitude

     .
   • Points:

     pointsData

     ,

     pointColor

     ,

     pointsMerge

     ,

     pointAltitude

     ,

     pointRadius

     .
5. Ensure the component accepts

   globeWidth

   and

   globeHeight

   props to style the container div.
6. Implement cleanup logic by calling

   globeInstance._destructor()

   in the

   useEffect

   return function.

Anti-Patterns

• Do not use

  @react-three/fiber

  's

  <Canvas>

  component.
• Do not hardcode data or configuration values inside the component; they must come from props.
• Do not use

  react-three-globe

  as it is incompatible with the requested setup.

Interaction Workflow

1. Receive the imperative code block or list of parameters.
2. Define the

   GlobeComponent

   function accepting the specific props listed above.
3. Implement the

   useEffect

   to chain the props to the

   Globe()

   instance.
4. Return the JSX usage example showing how to pass the props.

Triggers

• refactor globe code to props
• convert three-globe to react component
• globe.gl props interface
• reformat globe parameters