@sqlrooms/cosmos / useHoverState

Function: useHoverState()

useHoverState(calcRelativeCoordinates): object

A custom hook that manages hover state for graph points.

This hook provides functionality to:

• Track which point is currently being hovered
• Store the hover position coordinates
• Clear the hover state
• Provide event handlers for hover-related graph interactions

Parameters

Parameter	Type	Description
calcRelativeCoordinates	(x, y) => [number, number]	A function that converts client coordinates to container-relative coordinates

Returns

object

An object containing the hover state and event handlers for the graph

Name	Type	Description
hoveredPoint	HoverState	The current hover state, containing the index and position of the hovered point, or null if no point is hovered
eventHandlers	{ onPointMouseOver: (index, pointPosition, event) => void; onPointMouseOut: () => void; onZoomStart: () => void; onDragStart: () => void; }	Event handlers for hover-related graph interactions

Example

const Graph = () => {
  const calcRelativeCoords = useRelativeCoordinates(containerRef);
  const { hoveredPoint, eventHandlers } = useHoverState(calcRelativeCoords);

  return (
    <div ref={containerRef}>
      <CosmosGraph
        config={eventHandlers}
      />
      {hoveredPoint && (
        <Tooltip
          x={hoveredPoint.position[0]}
          y={hoveredPoint.position[1]}
        />
      )}
    </div>
  );
};