v5.0.0

Refactoring and simplification of codebase and exposed public APIs.

Changes

• New props (see section below).
• Flattened options prop (improves and simplifies component rendering lifecycle with hooks).
• Improved Globe instance support.
• Bugfixes and performance improvements.
  • Fixed various GH issues.
  • Memory leaks with marker callbacks.
• Simplified and decoupled internal implementation.
• Detypescriptify source code to improve future OSS development.
• Updated dev tools and build pipeline (microbundle, xo).
• Updated docs and examples.

Breaking Changes

Named Exports

Only the Globe class, ReactGlobe component, defaultCallbacks, defaultInitialCoordinates, defaultOptions, and tween util are now exported to limit the exposed public API.

Types

Various exported types have changed. The new types form a smaller and simplified set.

Props

Various props are replaced, updated (interface updates), removed, or unchanged. The following table tracks the status of old vs new props.

Status	Old	New
updated	animations	animations
updated	onDefocus	onDefocus
replaced	cameraOptions	options
replaced	focusOptions	options
replaced	globeOptions	options
replaced	lightOptions	options
replaced	markerOptions	options
replaced	size	height, width
unchanged	focus	focus
unchanged	initialCoordinates	initialCoordinates
unchanged	markers	markers
unchanged	onClickMarker	onClickMarker
unchanged	onMouseOutMarker	onMouseOutMarker
unchanged	onMouseOverMarker	onMouseOverMarker
renamed	onGetGlobeInstance	onGetGlobe
renamed	onTextureLoaded	onGlobeTextureLoaded
added		globeBackgroundTexture
added		globeCloudsTexture
added		globeTexture
added		onGlobeBackgroundTextureLoaded
added		onGlobeCloudsTextureLoaded

Options

react-globe provides useful and convenient configurations to customize the globe. These configurations still exist, but are managed in a flat options object. This allows easier code/documentation management of globe configuration.

Most options are renamed in an organized way that allows easy refactoring.

Status	Old	New
removed	globeOptions.enableBackground
removed	globeOptions.enableClouds
removed	markerOptions.activeScale
renamed	cameraOptions.autoRotateSpeed	options.cameraAutoRotateSpeed
renamed	cameraOptions.distanceRadiusScale	options.cameraDistanceRadiusScale
renamed	cameraOptions.enableAutoRotate	options.enableCameraAutoRotate
renamed	cameraOptions.enableRotate	options.enableCameraRotate
renamed	cameraOptions.enableZoom	options.enableCameraZoom
renamed	cameraOptions.maxDistanceRadiusScale	options.cameraMaxDistanceRadiusScale
renamed	cameraOptions.maxPolarAngle	options.cameraMaxPolarAngle
renamed	cameraOptions.minPolarAngle	options.cameraMinPolarAngle
renamed	cameraOptions.rotateSpeed	options.cameraRotateSpeed
renamed	cameraOptions.zoomSpeed	options.cameraZoomSpeed
renamed	focusOptions.animationDuration	options.focusAnimationDuration
renamed	focusOptions.distanceRadiusScale	options.focusDistanceRadiusScale
renamed	focusOptions.easingFunction	options.focusEasingFunction
renamed	focusOptions.enableDefocus	options.enableDefocus
renamed	globeOptions.backgroundTexture	options.globeBackgroundTexture
renamed	globeOptions.cloudsOpacity	options.globeCloudsOpacity
renamed	globeOptions.cloudsTexture	options.globeCloudsTexture
renamed	globeOptions.enableGlow	options.enableGlobeGlow
renamed	globeOptions.glowCoefficient	options.globeGlowCoefficient
renamed	globeOptions.glowColor	options.globeGlowColor
renamed	globeOptions.glowPower	options.globeGlowPower
renamed	globeOptions.glowRadiusScale	options.globeGlowRadiusScale
renamed	globeOptions.texture	options.globeTexture
renamed	lightOptions.ambientLightColor	options.ambientLightColor
renamed	lightOptions.ambientLightIntensity	options.ambientLightIntensity
renamed	lightOptions.pointLightColor	options.pointLightColor
renamed	lightOptions.pointLightIntensity	options.pointLightIntensity
renamed	lightOptions.pointLightPositionRadiusScales	options.pointLightPositionRadiusScales
renamed	markerOptions.enableGlow	options.enableMarkerGlow
renamed	markerOptions.enableTooltip	options.enableMarkerTooltip
renamed	markerOptions.enterAnimationDuration	options.markerEnterAnimationDuration
renamed	markerOptions.enterEasingFunction	options.markerEnterEasingFunction
renamed	markerOptions.exitAnimationDuration	options.markerExitAnimationDuration
renamed	markerOptions.exitEasingFunction	options.markerExitEasingFunction
renamed	markerOptions.getTooltipContent	options.markerTooltipRenderer
renamed	markerOptions.glowCoefficient	options.markerGlowCoefficient
renamed	markerOptions.glowPower	options.markerGlowPower
renamed	markerOptions.glowRadiusScale	options.markerGlowRadiusScale
renamed	markerOptions.offsetRadiusScale	options.markerOffsetRadiusScale
renamed	markerOptions.radiusScaleRange	options.markerRadiusScaleRange
renamed	markerOptions.renderer	options.markerRenderer
renamed	markerOptions.type	options.markerType

Globe instance

As mentioned in the v4.0.0 docs, the Globe instance APIs are unstable and not formally maintained. The Globe class instance is now managed through a new set of class methods, and the old methods are no longer compatible.

v5.0.0 introduces more formal support for the Globe instance.

CSS

Tooltip (tippy) CSS is no longer bundled with the project. You can optionally import it with:

import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/scale.css';