🌎 react-globe
Create beautiful and interactive React + ThreeJS globe visualizations with ease.
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!
;; { return <ReactGlobe />}
Kitchen Sink
An example showing various features (markers, tooltips, options, callbacks, textures).
;; // import optional tippy styles for tooltip support;; { // support rendering markers with simple data const markers = id: 'marker1' city: 'Singapore' color: 'red' coordinates: 13521 1038198 value: 50 id: 'marker2' city: 'New York' color: 'blue' coordinates: 4073061 -73935242 value: 25 id: 'marker3' city: 'San Francisco' color: 'orange' coordinates: 37773972 -122431297 value: 35 id: 'marker4' city: 'Beijing' color: 'gold' coordinates: 399042 1164074 value: 135 id: 'marker5' city: 'London' color: 'green' coordinates: 515074 01278 value: 80 id: 'marker6' city: 'Los Angeles' color: 'gold' coordinates: 297604 -953698 value: 54 ; // simple and extensive options to configure globe const options = ambientLightColor: 'red' cameraRotateSpeed: 05 focusAnimationDuration: 2000 focusEasingFunction: 'Linear' 'None' pointLightColor: 'gold' pointLightIntensity: 15 globeGlowColor: 'blue' ` ()` ; const globe setGlobe = ; console; // captured globe instance with API methods // simple component usage return <ReactGlobe height="100vh" globeBackgroundTexture="https://your/own/background.jpg" globeCloudsTexture=null globeTexture="https://your/own/globe.jpg" initialCoordinates=13521 1038198 markers=markers options=options width="100%" onClickMarker= console onGetGlobe=setGlobe onMouseOutMarker= console onGlobeTextureLoaded= console onMouseOverMarker= console > }
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 git@github.com:chrisrzhou/react-globe cd react-globenpm install && npm run docs
Basic Example (no props)
Interactive Example (with markers)
Custom Marker Renderer Example
Google Globe Trends
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.