JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 369
  • Score
    100M100P100Q90075F
  • License MIT

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

Package Exports

  • react-globe

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-globe) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🌎 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.
  • 🤸‍ 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)

image

Edit react-globe-simple

Interactive Example (with markers)

image

Edit react-globe-interactive

image

Link to app

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 by tippy.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.

Author's Note

My projects will always be (ads-)free. I constantly learn from the community, so these projects are a way of giving back to the community. If you liked this project or find it useful, feel free to buy me a cup of coffee ☕️ through a small donation!

paypal