back
loading skill details...
Use when integrating @frank17008/react-jsmind npm package into React applications
---
name: react-jsmind-usage
description: Use when integrating @frank17008/react-jsmind npm package into React applications
---
# ReactJsMind Integration
## Overview
React wrapper around jsMind for rendering interactive mind maps. Helps developers quickly integrate the npm package with correct imports, types, and configuration.
## When to Use
- Developer asks "how to install and use react-jsmind"
- Developer reports "mind map not showing"
- Developer needs ref methods (getData, addNode, screenShot)
- Developer confused about data format or types
## Installation
```bash
npm install @frank17008/react-jsmind
# or
yarn add @frank17008/react-jsmind
```
No need to install jsmind separately - it's a peer dependency.
## Core Pattern - Basic Integration
```tsx
import React, { useRef } from 'react'
import ReactJsMind from '@frank17008/react-jsmind'
import type { JsMindRefValue, JsMindData } from '@frank17008/react-jsmind'
import '@frank17008/react-jsmind/dist/esm/index.min.css' // REQUIRED for styling
const App = () => {
const mindRef = useRef<JsMindRefValue | null>(null)
// Correct data format - MUST include meta and format
const mindData: JsMindData = {
meta: { name: '思维导图', author: 'Your Name', version: '1.0' },
format: 'node_tree',
data: {
id: 'root',
topic: '中心主题',
children: [
{ id: '1', topic: '分支1' },
{ id: '2', topic: '分支2' },
],
},
}
return (
<div style={{ width: '100%', height: 600 }}> // REQUIRED: parent must have explicit size
<ReactJsMind
ref={mindRef}
data={mindData}
options={{ editable: true }}
onClick={(node) => console.log('Clicked:', node)}
/>
</div>
)
}
export default App
```
## Quick Reference
### Types (import from @frank17008/react-jsmind)
| Type | Usage |
|------|-------|
| `JsMindRefValue` | Ref type for useRef |
| `JsMindData` | Data object with meta/format/data |
| `TreeNode` | Single node with id/topic/children |
| `ArrayTreeNode` | Array format node with parentid |
### Ref Methods
```tsx
mindRef.current?.getData() // Get current data
mindRef.current?.getSelectedNode() // Get selected node
mindRef.current?.screenShot() // Export as PNG
mindRef.current?.expandAll() // Expand all nodes
mindRef.current?.addNode(parent, 'id', 'topic', {}, 'right') // Add node
mindRef.current?.removeNode(node) // Remove node
mindRef.current?.setNodeColor(nodeId, '#ff0000', '#ffffff') // Set colors
```
### Data Formats
- **Tree format** (node_tree): `{ id, topic, children: [...] }`
- **Array format** (node_array): `{ id, topic, parentid }` with `isroot` for root
## Common Mistakes
### Mistake 1: Missing CSS Import
```tsx
// ❌ WRONG - no styling
import ReactJsMind from '@frank17008/react-jsmind'
// ✅ CORRECT
import ReactJsMind from '@frank17008/react-jsmind'
import '@frank17008/react-jsmind/dist/esm/index.min.css'
```
### Mistake 2: Wrong Type Name
```tsx
// ❌ WRONG
const ref = useRef<JsMindRef>(null)
// ✅ CORRECT
const ref = useRef<JsMindRefValue | null>(null)
```
### Mistake 3: Missing Container Size
```tsx
// ❌ WRONG - container has no size
<ReactJsMind data={data} />
// ✅ CORRECT - parent must have explicit width/height
<div style={{ width: '100%', height: 600 }}>
<ReactJsMind data={data} />
</div>
```
### Mistake 4: Incomplete Data Object
```tsx
// ❌ WRONG - passing TreeNode directly
<ReactJsMind data={{ id: 'root', topic: 'Root' }} />
// ✅ CORRECT - wrap in JsMindData with meta and format
<ReactJsMind data={{
meta: { name: 'demo' },
format: 'node_tree',
data: { id: 'root', topic: 'Root' }
}} />
```
## Data Format Examples
### Tree Format (Recommended)
```tsx
const data: JsMindData = {
meta: { name: 'My Mind Map', version: '1.0' },
format: 'node_tree',
data: {
id: 'root',
topic: 'Main Topic',
expanded: true,
children: [
{ id: '1', topic: 'Child 1', direction: 'left' },
{ id: '2', topic: 'Child 2', direction: 'right', children: [
{ id: '2-1', topic: 'Grandchild' }
]},
],
},
}
```
### Array Format
```tsx
const data: JsMindData = {
meta: { name: 'My Mind Map' },
format: 'node_array',
data: [
{ id: 'root', topic: 'Main', parentid: null, isroot: true },
{ id: '1', topic: 'Child 1', parentid: 'root' },
{ id: '2', topic: 'Child 2', parentid: 'root' },
],
}
```
## Troubleshooting
### "Mind map not showing"
1. Check parent container has explicit width/height
2. Verify CSS is imported: `import '@frank17008/react-jsmind/dist/esm/index.min.css'`
3. Ensure data format includes meta and format fields
### "TypeScript errors"
1. Use `JsMindRefValue` not `JsMindRef`
2. Import types: `import type { JsMindRefValue, JsMindData } from '@frank17008/react-jsmind'`
### "screenShot not working"
1. Ensure container has rendered first
2. Check dom-to-image dependency is installeddon't have the plugin yet? install it then click "run inline in claude" again.
added explicit inputs section for dependencies and environment, numbered procedure steps with input/output pairs, decision points for typescript/rendering/export issues, output contract defining data format and file locations, outcome signal defining success criteria, clarified edge cases like ref timing and dom-to-image requirement.
react-jsmind is an npm wrapper around jsMind that renders interactive mind maps in react apps. use this skill when a developer needs to install the package, wire up types correctly, configure the component with proper data structures, call ref methods (getData, addNode, screenShot), or debug a non-rendering mind map. the skill covers installation, core component setup, type imports, data formats, common mistakes, and troubleshooting.
npm install dom-to-imageinstall the package via npm or yarn:
npm install @frank17008/react-jsmind or yarn add @frank17008/react-jsmindimport the component, types, and css in your react file:
import ReactJsMind from '@frank17008/react-jsmind'import type { JsMindRefValue, JsMindData, TreeNode, ArrayTreeNode } from '@frank17008/react-jsmind'import '@frank17008/react-jsmind/dist/esm/index.min.css' (required or mind map will not render)create a useRef hook to access component methods:
const mindRef = useRef<JsMindRefValue | null>(null)structure your mind map data with required meta and format fields:
wrap ReactJsMind in a container div with explicit width and height:
<div style={{ width: '100%', height: 600 }}><ReactJsMind ... /></div>pass the data ref and options to ReactJsMind:
<ReactJsMind ref={mindRef} data={mindData} options={{editable: true}} onClick={handler} />call ref methods as needed to interact with the mind map:
mindRef.current?.getData() returns current JsMindData objectmindRef.current?.getSelectedNode() returns currently selected TreeNode or nullmindRef.current?.screenShot() exports mind map as PNG (requires dom-to-image)mindRef.current?.expandAll() expands all collapsed nodesmindRef.current?.addNode(parentId, nodeId, topic, attributes, direction) adds new child nodemindRef.current?.removeNode(nodeId) deletes node and childrenmindRef.current?.setNodeColor(nodeId, bgColor, textColor) sets node colors (hex format)npm install dom-to-image.mindRef.current?.getData().JsMindRefValue | null in useRef generic, not JsMindRef (which does not exist).success is a rendered, interactive mind map in the browser with the following guarantees:
the skill worked if: