@bebeau/globe v1.2.0

WKNDHRS Globe Package

Overview

This project is a package that can be added to any react web/mobile application. The package renders a 3D globe with animation arcs representing the sending to/from lat/lng data points. Data points are managed per client install or manually passed as a prop to the component.

View the live demo

Install

1. Make sure your project has these package versions installed.

"peerDependencies": {
  "react": "18.0.0",
  "react-dom": "18.0.0",
  "react-native": "0.69.9",
  "react-scripts": "^5.0.1",
  "expo": "46.0.20"
}

2. Add package to working project

yarn add @bebeau/globe

2. Import into project

import GlobeRender from '@bebeau/globe';

3. Use component

<GlobeRender
  cleintID=""
  manualDataPoints=""
  messages=""
  theme=""
  type=""
  currentUser=""
  currentLocation=""
  exit=""
>

4. The globe package is using flexbox to fit the height of the parent element. Be sure to set the height of the parent element the globe package is used within.

Default Props

Themes

The theme passed in determines the styling of the globe element. There are two theme options, child and adult.

Child	Adult

Optional Props

Data Structure

Messages Object

{
 location: {
    state: string,
    countryCode: string
  },
  "message": string,
  "sender": string
}

Location Object

{
  id: string,
  title: string,
  coordinates: {
    lng: number,
    lat: number,
  },
}