API Reference

Complete reference for the MindMap component and its props.

Component Anatomy

The standard way to use the MindMap component.

<MindMap data={initialData}>
  <MindMapControls />
</MindMap>

The root component that initializes the mind map instance. It handles data loading, theme management, and event listeners.

Prop	Type	Default	Description
`data`	`MindElixirData`	`—`	Initial data for the mind map. Changes to this prop will update the map content.
`direction`	`0 \| 1 \| 2`	`1`	Layout direction: 0 (Left), 1 (Right), 2 (Side/Both).
`draggable`	`boolean`	`true`	Enable node dragging.
`contextMenu`	`boolean`	`true`	Enable right-click context menu.
`toolBar`	`boolean`	`false`	Show the built-in toolbar (not recommended, use MindMapControls instead).
`nodeMenu`	`boolean`	`true`	Show menu when clicking a node.
`keypress`	`boolean`	`true`	Enable keyboard shortcuts (Enter, Tab, etc.).
`locale`	`"en" \| "zh_CN" \| "zh_TW" \| "ja" \| "pt"`	`"en"`	Language for built-in menus and prompts.
`theme`	`"light" \| "dark"`	`—`	Force a specific theme. If omitted, follows system/document theme.
`fit`	`boolean`	`true`	Automatically fit map to view on load.
`onChange`	`(data: MindElixirData) => void`	`—`	Callback when map data changes.
`onSelectNodes`	`(nodes: NodeObj[]) => void`	`—`	Callback when nodes are selected.

A hook that provides access to the MindElixir instance. Must be used within a MindMap component.

const { mind, isLoaded } = useMindMap();

Returns mind (MindElixirInstance) and isLoaded (boolean).

Renders UI controls for the mind map (Zoom, Fit, Export, Fullscreen).

Prop	Type	Default	Description
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"top-right"`	Position of the controls overlay.
`showZoom`	`boolean`	`true`	Show Zoom In/Out buttons.
`showFit`	`boolean`	`true`	Show Fit-to-Screen button.
`showExport`	`boolean`	`true`	Show Export button.
`onExport`	`(type: string) => void`	`—`	Callback after export is triggered.