# 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.

- Skill: `ecnu-icalk/refactor-globe-configuration-to-react-props` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/refactor-globe-configuration-to-react-props`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/refactor-globe-configuration-to-react-props/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/refactor-globe-configuration-to-react-props

---


# 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