Need help with react-globe?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

chrisrzhou
197 Stars 42 Forks MIT License 64 Commits 27 Opened issues

Description

Create beautiful and interactive React + ThreeJS globe visualizations with ease.

Services available

!
?

Need anything else?

Contributors list

No Data

🌎 react-globe

Create beautiful and interactive React + ThreeJS globe visualizations with ease.

image

Features

  • ✨ Beautiful and complete with clouds, backgrounds and lighting.
  • ✌️ Incredibly simple to use and configure.
  • 📍 Render interactive markers on the globe using simple data.
  • 🎞 Easy globe animations and marker transitions.
  • ⚛️ Modern Javascript + build tools.

Install

npm install react-globe

Note that

react-globe
requires
react >= 16.13.1
and
three >= 0.118.3
as peer dependencies.

Use

Simple

Render a simple interactive globe with a single line of code!

import React from 'react';
import ReactGlobe from 'react-globe';

function SimpleGlobe() { return }

Kitchen Sink

An example showing various features (markers, tooltips, options, callbacks, textures).

import React, { useState } from 'react';
import ReactGlobe from 'react-globe';

// import optional tippy styles for tooltip support import 'tippy.js/dist/tippy.css'; import 'tippy.js/animations/scale.css';

function MyGlobe() { // support rendering markers with simple data const markers = [ { id: 'marker1', city: 'Singapore', color: 'red', coordinates: [1.3521, 103.8198], value: 50, }, { id: 'marker2', city: 'New York', color: 'blue', coordinates: [40.73061, -73.935242], value: 25, }, { id: 'marker3', city: 'San Francisco', color: 'orange', coordinates: [37.773972, -122.431297], value: 35, }, { id: 'marker4', city: 'Beijing', color: 'gold', coordinates: [39.9042, 116.4074], value: 135, }, { id: 'marker5', city: 'London', color: 'green', coordinates: [51.5074, 0.1278], value: 80, }, { id: 'marker6', city: 'Los Angeles', color: 'gold', coordinates: [29.7604, -95.3698], value: 54, }, ];

// simple and extensive options to configure globe const options = { ambientLightColor: 'red', cameraRotateSpeed: 0.5, focusAnimationDuration: 2000, focusEasingFunction: ['Linear', 'None'], pointLightColor: 'gold', pointLightIntensity: 1.5, globeGlowColor: 'blue', markerTooltipRenderer: marker => ${marker.city} (${marker.value}), };

const [globe, setGlobe] = useState(null); console.log(globe); // captured globe instance with API methods

// simple component usage return ( console.log(marker, markerObject, event)} onGetGlobe={setGlobe} onMouseOutMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)} onGlobeTextureLoaded={() => console.log('globe loaded')} onMouseOverMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)} > ) }

Examples

View all documented examples and gallery of

react-globe
applications at https://react-globe.netlify.com/.

You can also run the examples locally:

git clone [email protected]:chrisrzhou/react-globe

cd react-globe npm install && npm run docs

Basic Example (no props)

image

Edit react-globe-simple

Interactive Example (with markers)

image

Edit react-globe-interactive

Custom Marker Renderer Example

image

Edit react-globe-interactive

Google Globe Trends

image

Link to app

Contributing

The code is written in

typescript
, linted with
xo
, and built with
microbundle
. Examples and documentations are built with
docz
.

Feel free to contribute by submitting a pull request.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.