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>

MindMap

The root component that initializes the mind map instance. It handles data loading, theme management, and event listeners. Designed primarily for presentation; set readonly for view-only maps.

Prop	Type	Default	Description
`data`	`MindElixirData`	`—`	Map data. See the Data Structure page. Updates to this prop refresh the map content.
`direction`	`0 \| 1 \| 2`	`2`	Layout direction: 0 (Left), 1 (Right), 2 (Side/Both).
`contextMenu`	`boolean`	`true`	Enable right-click context menu.
`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.
`overflowHidden`	`boolean`	`false`	Clip map content that overflows the container.
`theme`	`"light" \| "dark"`	`—`	Force a specific theme. If omitted, follows system/document theme.
`monochrome`	`boolean`	`false`	Use a single-color branch palette that matches the theme foreground.
`fit`	`boolean`	`true`	Automatically fit map to view on load.
`readonly`	`boolean`	`false`	Disable editing. Recommended for presentation / embedded maps.
`compact`	`boolean`	`false`	Tighter node spacing for dense presentation layouts.
`markdown`	`(text: string, obj) => string`	`—`	Custom markdown parser. Topics are rendered as HTML through this function. Bring your own parser (e.g. marked) or a small custom one.
`imageProxy`	`(url: string) => string`	`—`	Rewrite remote node image URLs so they can be captured when exporting the map. Only needed to avoid CORS failures during image generation — not for normal on-screen display.
`onChange`	`(data: MindElixirData, operation: unknown) => void`	`—`	Callback when map data changes due to an operation.
`onOperation`	`(operation: unknown) => void`	`—`	Callback for each Mind Elixir operation event.
`onSelectNodes`	`(nodes: NodeObj[]) => void`	`—`	Callback when nodes are selected.
`loader`	`ReactNode`	`—`	Custom loading indicator shown before the map is ready.
`className`	`string`	`—`	Extra class names on the outer wrapper.

For the shape of data, see Data Structure.

useMindMap

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

const { mind, isLoaded } = useMindMap();

Returns mind (MindElixirInstance) and isLoaded (boolean). For the full instance API (methods, events, data shape), see Mind Elixir Core.

MindMapControls

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`	`(file: Blob, filename: string) => void`	`—`	Called with the exported image blob and filename after export.
`className`	`string`	`—`	Extra class names on the controls container.

PreviousData Structure