API Reference

All pre-configured map components (USAMap, WorldMap, etc.) share a common set of props inherited from the core Map component. Each map may also expose map-specific props documented on its own page.

Map Props

Prop	Type	Default	Description
regions	RegionOverride[]	[]	Per-region overrides for className, tooltipContent, disabled, and display fields.
disabledRegions	string[]	[]	Region IDs to mark as non-interactive.
onRegionClick	(event: RegionEvent) => void	—	Fired on click or keyboard Enter/Space.
onRegionEnter	(event: RegionEvent) => void	—	Fired on mouse enter or focus.
onRegionLeave	(event: RegionEvent) => void	—	Fired on mouse leave or blur.
onMarkerClick	(event: MarkerEvent) => void	—	Fired when a marker is clicked.
markers	MapMarkerData[]	[]	SVG markers to overlay on the map.
renderTooltip	(region: MapRegionData) => ReactNode	—	Custom tooltip renderer. Falls back to region name.
showLabels	boolean	true	Show abbreviation labels inside each region.
showTooltips	boolean	true	Enable tooltip on hover and click.
className	string	—	Class applied to the root SVG element.
aria-label	string	Map name	Accessible label for the map.

Types

RegionEvent

typescript

interface RegionEvent {
  region: MapRegionData
  nativeEvent: MouseEvent | TouchEvent | FocusEvent | KeyboardEvent
}

MarkerEvent

typescript

interface MarkerEvent {
  id: string
  nativeEvent: MouseEvent | TouchEvent | FocusEvent | KeyboardEvent
}

RegionOverride

typescript

interface RegionOverride {
  id: string
  name?: string
  abbreviation?: string
  labelX?: number
  labelY?: number
  metadata?: Record<string, unknown>
  className?: string
  labelClassName?: string
  tooltipContent?: ReactNode
  disabled?: boolean
}

MapRegionData

typescript

interface MapRegionData {
  id: string
  name: string
  path: string
  abbreviation?: string
  labelX?: number
  labelY?: number
  metadata?: Record<string, unknown>
}

MapMarkerData

typescript

interface MapMarkerData {
  id: string
  x: number
  y: number
  content: ReactNode
  tooltipContent?: ReactNode
  label?: string
  disabled?: boolean
}