{"id":13402669,"url":"https://github.com/chrisrzhou/react-globe","last_synced_at":"2025-04-04T18:10:28.825Z","repository":{"id":41403607,"uuid":"178726217","full_name":"chrisrzhou/react-globe","owner":"chrisrzhou","description":"Create beautiful and interactive React + ThreeJS globe visualizations with ease.","archived":false,"fork":false,"pushed_at":"2021-04-02T22:59:32.000Z","size":49451,"stargazers_count":306,"open_issues_count":29,"forks_count":54,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-10-30T06:58:36.648Z","etag":null,"topics":["earth","globe","io","react","threejs","visualization","webgl"],"latest_commit_sha":null,"homepage":"https://react-globe.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisrzhou.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-31T18:27:55.000Z","updated_at":"2024-10-19T11:15:00.000Z","dependencies_parsed_at":"2022-08-10T02:07:23.980Z","dependency_job_id":null,"html_url":"https://github.com/chrisrzhou/react-globe","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrzhou%2Freact-globe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrzhou%2Freact-globe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrzhou%2Freact-globe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrzhou%2Freact-globe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisrzhou","download_url":"https://codeload.github.com/chrisrzhou/react-globe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226215,"owners_count":20904465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["earth","globe","io","react","threejs","visualization","webgl"],"created_at":"2024-07-30T19:01:19.246Z","updated_at":"2025-04-04T18:10:28.769Z","avatar_url":"https://github.com/chrisrzhou.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 🌎 react-globe\n\nCreate beautiful and interactive React + ThreeJS globe visualizations with ease.\n\n![image](/public/react-globe.gif)\n\n## Features\n\n- ✨ Beautiful and complete with clouds, backgrounds and lighting.\n- ✌️ Incredibly simple to use and configure.\n- 📍 Render interactive markers on the globe using simple data.\n- 🎞 Easy globe animations and marker transitions.\n- ⚛️ Modern Javascript + build tools.\n\n## Install\n\n```sh\nnpm install react-globe\n```\n\nNote that `react-globe` requires `react \u003e= 16.13.1` and `three \u003e= 0.118.3` as peer dependencies.\n\n## Use\n\n### Simple\n\nRender a simple interactive globe with a single line of code!\n\n```js\nimport React from 'react';\nimport ReactGlobe from 'react-globe';\n\nfunction SimpleGlobe() {\n  return \u003cReactGlobe /\u003e\n}\n```\n\n### Kitchen Sink\n\nAn example showing various features (markers, tooltips, options, callbacks, textures).\n\n```js\nimport React, { useState } from 'react';\nimport ReactGlobe from 'react-globe';\n\n// import optional tippy styles for tooltip support\nimport 'tippy.js/dist/tippy.css';\nimport 'tippy.js/animations/scale.css';\n\nfunction MyGlobe() {\n  // support rendering markers with simple data\n  const markers = [\n    {\n      id: 'marker1',\n      city: 'Singapore',\n      color: 'red',\n      coordinates: [1.3521, 103.8198],\n      value: 50,\n    },\n    {\n      id: 'marker2',\n      city: 'New York',\n      color: 'blue',\n      coordinates: [40.73061, -73.935242],\n      value: 25,\n    },\n    {\n      id: 'marker3',\n      city: 'San Francisco',\n      color: 'orange',\n      coordinates: [37.773972, -122.431297],\n      value: 35,\n    },\n    {\n      id: 'marker4',\n      city: 'Beijing',\n      color: 'gold',\n      coordinates: [39.9042, 116.4074],\n      value: 135,\n    },\n    {\n      id: 'marker5',\n      city: 'London',\n      color: 'green',\n      coordinates: [51.5074, 0.1278],\n      value: 80,\n    },\n    {\n      id: 'marker6',\n      city: 'Los Angeles',\n      color: 'gold',\n      coordinates: [29.7604, -95.3698],\n      value: 54,\n    },\n  ];\n\n  // simple and extensive options to configure globe\n  const options = {\n    ambientLightColor: 'red',\n    cameraRotateSpeed: 0.5,\n    focusAnimationDuration: 2000,\n    focusEasingFunction: ['Linear', 'None'],\n    pointLightColor: 'gold',\n    pointLightIntensity: 1.5,\n    globeGlowColor: 'blue',\n    markerTooltipRenderer: marker =\u003e `${marker.city} (${marker.value})`,\n  };\n\n  const [globe, setGlobe] = useState(null);\n  console.log(globe); // captured globe instance with API methods\n\n  // simple component usage\n  return (\n    \u003cReactGlobe\n      height=\"100vh\"\n      globeBackgroundTexture=\"https://your/own/background.jpg\"\n      globeCloudsTexture={null}\n      globeTexture=\"https://your/own/globe.jpg\"\n      initialCoordinates={[1.3521, 103.8198]}\n      markers={markers}\n      options={options}\n      width=\"100%\"\n      onClickMarker={(marker, markerObject, event) =\u003e console.log(marker, markerObject, event)}\n      onGetGlobe={setGlobe}\n      onMouseOutMarker={(marker, markerObject, event) =\u003e console.log(marker, markerObject, event)}\n      onGlobeTextureLoaded={() =\u003e console.log('globe loaded')}\n      onMouseOverMarker={(marker, markerObject, event) =\u003e console.log(marker, markerObject, event)}\n    \u003e\n  )\n}\n```\n\n## Examples\n\nView all documented examples and gallery of `react-globe` applications at https://react-globe.netlify.com/.\n\nYou can also run the examples locally:\n\n```bash\ngit clone git@github.com:chrisrzhou/react-globe\n\ncd react-globe\nnpm install \u0026\u0026 npm run docs\n```\n\n### Basic Example (no props)\n\n![image](/public/react-globe-basic.gif)\n\n[![Edit react-globe-simple](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/88645px230)\n\n### Interactive Example (with markers)\n\n![image](/public/react-globe.gif)\n\n[![Edit react-globe-interactive](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/p5lwvkp7x)\n\n### Custom Marker Renderer Example\n\n![image](/public/react-globe-custom-marker-renderer.gif)\n\n[![Edit react-globe-interactive](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/knhlr)\n\n### Google Globe Trends\n\n![image](/public/google-globe-trends.gif)\n\n[Link to app](https://google-globe-trends.netlify.com)\n\n## Contributing\n\nThe code is written in `typescript`, linted with `xo`, and built with `microbundle`. Examples and documentations are built with `docz`.\n\nFeel free to contribute by submitting a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisrzhou%2Freact-globe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisrzhou%2Freact-globe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisrzhou%2Freact-globe/lists"}