React

Interfaces

OrbitMindMapProps

How a map looks and behaves. Every option is optional; options passed to the renderer win over the document’s frontmatter.

Extends

Properties

Property Type Description Inherited from
actions? OrbitAction[] Your own buttons under the focused node and in its detail sheet, before the registered ones. RendererOptions.actions
ariaLabel? string The map’s accessible name. Default: the document’s title. RendererOptions.ariaLabel
baseUrl? string Resolves relative image, video and link URLs. RendererOptions.baseUrl
data? OrbitNode A node tree, for maps built in code. -
document? OrbitDocument A parsed document. Its frontmatter options apply unless a prop overrides them. -
editable? boolean Build the map on the map: a + in the orbit adds an idea, typed right in its new planet, and a long press, a right click or F2 edits a node’s text where it is. Default false. RendererOptions.editable
focus? string The node in focus when the map first draws, by id: to open a map where the reader left it. Default: the root. Later renders keep the reader’s place. RendererOptions.focus
focusedId? string The focused node’s id, to control focus from your state. The map flies to it when it changes; pair it with onFocusChange to follow the reader. -
interactive? boolean false draws a still picture: no clicks, drags, zoom or keyboard. Default true. RendererOptions.interactive
longPressDelay? number How long (ms) a finger or pen holds still on a node before it counts as a long press (see onNodeContext). Default 500; apps can pass their platform’s own, such as Android’s 400. RendererOptions.longPressDelay
maxDepth? number Levels below the root to render (1 = root + direct children). RendererOptions.maxDepth
nodeTypes? Record<string, OrbitNodeType> Node types by name: what nodes with type: name look like, draw inside them, show in the detail sheet and offer as actions. They come before the ones registered with registerNodeType. RendererOptions.nodeTypes
noteRenderer? (note, context) => string Renders a note to HTML yourself. The HTML is used as-is: sanitize untrusted notes. RendererOptions.noteRenderer
onAction? (event) => false | void A button was pressed. Return false to skip what it does (the detail sheet, the link, or your action’s run). RendererOptions.onAction
onEdit? (edit) => void The map was edited with addNode, updateNode, removeNode or moveNode; save renderer.toMarkdown() to keep it. RendererOptions.onEdit
onEditorClose? (event) => void The field for typing on the map closed. RendererOptions.onEditorClose
onEditorOpen? (event) => void The field for typing on the map opened. RendererOptions.onEditorOpen
onFocusChange? (node) => void A new node is in focus. RendererOptions.onFocusChange
onNodeClick? (node) => void A node was clicked or activated with the keyboard, before the map reacts. RendererOptions.onNodeClick
onNodeContext? (event) => void A node was long-pressed, right-clicked or chosen with the context menu key: show a menu of things to do with it at (x, y). With this callback or a node-context listener, the press is yours: it doesn’t open the node, and the browser’s own menu stays closed. RendererOptions.onNodeContext
onSpinSettle? (planet) => void Called when a flicked orbit comes to rest, with the planet nearest the top. RendererOptions.onSpinSettle
onViewModeChange? (mode) => void - RendererOptions.onViewModeChange
orbitAnimation? boolean Keep the orbit turning slowly on its own. RendererOptions.orbitAnimation
orbitSpeed? number Seconds per revolution of orbitAnimation. RendererOptions.orbitSpeed
palette? string[] Node colors: the first for the root, then one per top-level branch (cycling). Default: the theme’s. RendererOptions.palette
showActionButtons? boolean Buttons under the focused node for its note, media, link and actions. Default true. RendererOptions.showActionButtons
showControls? boolean Breadcrumbs, the view switch, the list button and zoom buttons. Default true. RendererOptions.showControls
showDetailSheet? boolean Open the built-in detail sheet for notes and media. Default true. RendererOptions.showDetailSheet
showRings? boolean Draw the dashed orbit rings. Default true. RendererOptions.showRings
source? string Markdown or YAML source, parsed with parseOrbit. Its frontmatter options apply unless a prop overrides them. -
spin? OrbitSpinOptions How a flicked orbit spins. RendererOptions.spin
staticFallback? boolean Render a static SVG of the map until the live one mounts, so server rendering and slow connections show the map right away. Default true. -
statuses? Record<string, OrbitStatusStyle> Status words and how they look: a dot tone (active, done, blocked, todo, neutral) or any CSS color, as in { review: 'active', 'on hold': '#A855F7' }. RendererOptions.statuses
theme? | OrbitThemePreset | OrbitRendererTheme | string & object A theme name ('night', 'cosmos', or one registered with registerTheme) or a theme object. An object without a preset keeps the document’s theme and changes the tokens it names. RendererOptions.theme
transitionDuration? number | "auto" Navigation flight length in milliseconds, or auto to scale with the distance travelled. RendererOptions.transitionDuration
viewMode? ViewMode The first view: focus (default) or all, the overview. RendererOptions.viewMode
zoom? OrbitZoomOptions How the wheel, trackpads and pinches zoom. RendererOptions.zoom

OrbitMindMapRef

Properties

Property Modifier Type Description
renderer readonly OrbitSVGRenderer | null The renderer, once the map has mounted.

Methods

fit()
fit(): void;

Returns the camera to the fitted view.

Returns

void

flyTo()
flyTo(nodeId): boolean;

Flies to a node by id, in focus mode. Returns false when there’s no such node.

Parameters
Parameter Type
nodeId string
Returns

boolean

getViewMode()
getViewMode(): ViewMode | null;
Returns

ViewMode | null

overview()
overview(): void;

Flies out to the overview of the whole map.

Returns

void

setViewMode()
setViewMode(mode): void;
Parameters
Parameter Type
mode ViewMode
Returns

void

zoomBy()
zoomBy(factor): void;

Zooms by factor around the middle of the map (above 1 zooms in).

Parameters
Parameter Type
factor number
Returns

void

Variables

OrbitMindMap

const OrbitMindMap: ForwardRefExoticComponent<OrbitMindMapProps & RefAttributes<OrbitMindMapRef>>;

Renders an orbit map that fills its parent element, so give the parent a size. Pass the map as source (markdown or YAML), document or data.

Callback props can be inline functions and theme / palette can be inline objects: they never rebuild the map unless their values change.

Example

import { OrbitMindMap } from '@restless-dreams/orbit/react';

<div style={{ height: 480 }}>
  <OrbitMindMap source={'# Launch\n## Research\n## Build'} theme="night" onFocusChange={(node) => console.log(node.text)} />
</div>