3.2.2 β’ Published 5 years ago
@toolchest/react-globe v3.2.2
π 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.
- π€Έβ Easy globe animations.
- π Render interactive markers on the globe with simple data.
- βοΈ Modern Javascript + build tools.
Install
yarn add react-globe
Note that react-globe
requires react >= 16.8.0
and three >= 0.102.0
as peer dependencies.
Examples
Documented Examples
View all documented examples and gallery of react-globe
applications at https://react-globe.netlify.com/.
Local Examples
You can also run the examples locally:
git clone git@github.com:chrisrzhou/react-globe
cd react-globe
yarn
yarn dev
Basic Example (no props)
Interactive Example (with markers)
Custom Marker Renderer Example
Google Globe Trends
Development
Main Dependencies
react
three
three-glow-mesh
three-orbitcontrols
three.interaction
es6-tween
tippy.js
Codebase Overview
ReactGlobe.tsx
: Core component that combines React + ThreeJS hooks into an animated scene supporting interactions.Tooltip.tsx
: Tooltip component powered bytippy.js
.reducer.ts
: Simple state management for tracking focused coordinates and active markers.defaults.ts
: Default options and constants.utils.ts
: Simple functions to compute derived data./hooks
: React hooks to handle updating various ThreeJS entities (e.g. camera, globe, markers, renderer)./textures
: Default globe, clouds and background textures.
The code is written in typescript
, linted with eslint
+ prettier
, and built with rollup
. Examples and documentations are built with docz
.
Feel free to contribute by submitting a pull request.