https://github.com/rtugeek/mindmap
A React MindMap component using AntV X6
https://github.com/rtugeek/mindmap
mind-map mindmap react
Last synced: 29 days ago
JSON representation
A React MindMap component using AntV X6
- Host: GitHub
- URL: https://github.com/rtugeek/mindmap
- Owner: rtugeek
- Created: 2026-02-14T12:52:28.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2026-03-07T02:26:30.000Z (4 months ago)
- Last Synced: 2026-03-07T09:49:08.737Z (4 months ago)
- Topics: mind-map, mindmap, react
- Language: HTML
- Homepage: https://widgetjs.cn
- Size: 815 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @widget-js/mindmap
A React MindMap component using AntV X6.
## Installation
```bash
npm install @widget-js/mindmap
# or
pnpm add @widget-js/mindmap
# or
yarn add @widget-js/mindmap
```
## Usage
```tsx
import type { MindNode } from '@widget-js/mindmap'
import { MindMap } from '@widget-js/mindmap'
import { useState } from 'react'
import '@widget-js/mindmap/style.css'
const data: MindNode = {
id: 'root',
name: 'Root Node',
children: [
{
id: 'child1',
name: 'Child 1',
},
{
id: 'child2',
name: 'Child 2',
},
],
}
function App() {
const [isDarkMode, setIsDarkMode] = useState(false)
return (
{
console.log('Node changed:', type, newData)
}}
/>
)
}
```
## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | `MindNode` | Required | The data structure for the mind map. |
| `title` | `string` | `'思维导图'` | The title displayed in the top left corner. |
| `isDarkMode` | `boolean` | `false` | Controls the theme of the mind map. |
| `readonly` | `boolean` | `false` | If true, editing is disabled. |
| `onNodeChange` | `(data: MindNode, type: string) => void` | - | Callback triggered when nodes are changed. |
## Data Structure (MindNode)
```typescript
interface MindNode {
id: string
name: string
type?: string
checked?: boolean
url?: string
collapsed?: boolean
children?: MindNode[]
}
```
## Keyboard Shortcuts
When a node is selected:
- `Tab`: Create a child node.
- `Enter`: Create a sibling node.
- `Delete`: Delete the selected node.