Skip to content

v5.0.0
Compare
Choose a tag to compare
@chrisrzhou chrisrzhou released this 08 Aug 03:52
· 2 commits to main since this release
v5.0.0
This tag was signed with the committer’s verified signature.
chrisrzhou Chris Zhou
GPG key ID: 2072DEFEEBFF1BE8
Learn about vigilant mode.
efabc96
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

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';
Assets 2
Loading