Package Exports

react-globe-frequency
react-globe-frequency/dist/index.js

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-frequency) 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 Frequency

A simple React component for rendering a 3D globe with points plotted on it.

Installation

npm install react-globe-frequency

Usage

import { Globe, Point } from 'react-globe-frequency';

const points: Point[] = [
  {
    id: '1',
    latitude: 37.7749,
    longitude: -122.4194,
    country: 'United States',
    country_code: 'US',
    locality: 'San Francisco',
    region: 'California',
    postal_code: '94102',
    time_zone: 'America/Los_Angeles'
    // ip_address is optional
  },
  // Add more points...
];

function App() {
  return (
    <div>
      <Globe 
        points={points} 
        style={{ height: '400px', width: '600px' }}
      />
    </div>
  );
}

Props

points: An array of Point objects to display on the globe.
setHoveredPoint (optional): A callback function that receives the hovered point or null.
style (optional): React.CSSProperties object for styling the canvas element.
className (optional): CSS class name for the canvas element.

Point Type

interface Point {
  id: string;
  country: string;
  country_code: string;
  locality: string;
  region: string;
  ip_address?: string;
  latitude: number;
  longitude: number;
  postal_code: string;
  time_zone: string;
}

Publishing to npm

This package uses GitHub Actions for automated publishing. To set it up:

Create an npm account if you don't have one
Generate an access token from npm (Account Settings > Access Tokens)
Add the token as a GitHub secret named NPM_TOKEN in your repository settings
Create a new release on GitHub to trigger the publish workflow

Dependencies

This package requires React 18+, @react-three/fiber, @react-three/drei, and three.js.