🌎 react-globe (v5.0.2)

Callbacks

react-globe supports ways to capture interactive events through various callback props. These callbacks support ways to capture the pointer event, active marker data and corresponding THREE.Object3D object, providing enough data to build interactive applications. The example below demonstrates how to use the event handlers.

xxxxxxxxxx
 
() => {
  const [event, setEvent] = useState()
  const [details, setDetails] = useState()
  function onClickMarker(marker, markerObject, event) {
    setEvent({
      type: 'CLICK',
      marker,
      markerObjectID: markerObject.uuid,
      pointerEventPosition: { x: event.clientX, y: event.clientY },
    })
    setDetails(`City: ${marker.city} (Sales: ${marker.value}.0M)`)
  }
​
  function onDefocus(previousCoordinates) {
    setEvent({
      type: 'DEFOCUS',
      previousCoordinates,
    })
    setDetails()
  }
​
  function onMouseOutMarker(previousMarker, markerObject, event) {
    setEvent({
      type: 'MOUSEOUT',
      previousMarker,
      previousMarkerObjectID: markerObject.uuid,
      pointerEventPosition: { x: event.clientX, y: event.clientY },
    })
  }
​
  function onMouseOverMarker(marker, markerObject, event) {
    setEvent({
      type: 'MOUSEOVER',
      marker,
      markerObjectID: markerObject.uuid,
      pointerEventPosition: { x: event.clientX, y: event.clientY },
    })
  }
​
  return (
    <div style={{ position: 'relative' }}>
      <ReactGlobe
        onClickMarker={onClickMarker}
        onDefocus={onDefocus}
        onMouseOutMarker={onMouseOutMarker}
        onMouseOverMarker={onMouseOverMarker}
        markers={markers}
      />
      {details && (
        <div
          style={{
            background: 'white',
            fontSize: 24,
            padding: 12,
            position: 'absolute',
            right: 0,
            top: 0,
          }}
        >
          {details}
        </div>
      )}
      {event && (
        <div>
          <h2>
            <b>Event Name:</b> {event.type}
          </h2>
          <pre style={{ fontSize: 10 }}>{JSON.stringify(event, null, 2)}</pre>
        </div>
      )}
    </div>
  )
}