@aaic/mindmaptree

Made with create-react-library

Usage no npm install needed!

<script type="module">
  import aaicMindmaptree from 'https://cdn.skypack.dev/@aaic/mindmaptree';
</script>

README

React-nodemap

Made with create-react-library

NPM JavaScript Style Guide

react-nodemap(I prefer to call it react-mindmap, but it is massively used ๐Ÿ˜ฐ) is a mindmap React component that I converted from Vue by hand,so you may expect some bugs in any stage from packaging to excution. Feel free to post any issue you find, I will try my best to take care of it.

the original Vue version: [https://github.com/hellowuxin/mindmap]

๐Ÿ‰๐Ÿˆš Demo

play with the Demo

๐ŸคŸ๐ŸปNew Updates(latest first)

  1. can add your own watermark when export
  2. added right click context menu and an option to
  3. export whole mindmap to img or pdf

๐Ÿ’พ Install

npm install react-nodemap

or

yarn add react-nodemap

๐Ÿ”Œ API

Property Description Type Default
defaultValue tree data(currently only accepts one obj in the array as the only root ) [] [{ name: 'Root', children: [] }]
value same as defaultValue, but has full control [] [{ name: 'Root', children: [] }]
depthLimit add limit to tree depth int null
fields specify the extra fields you pass into the data structure and also expecting them back when exported in onDataChange, by default see below node structure [] ['id','createdAt']
onDataChange function to update your data passed in value prop func
style good to specify whole canvas width and height, especially for export to pdf, the best is a 297:210 ratio landscape {} none
exportWatermark show you own watermark img when export, you need at least a imgSrc a imgUrl or relative path and format e.g. 'JPEG', 'PNG', 'WEBP'(for jsPDF) {} {}

โ— Note

Node Data Structure Export

{
  name:'',
  children:[],
  // generated in the tree constructor, will be replaced if you have your own fields array
  size:[], 
  color:'',
  depth: 0,
  nodeId: 0,
}
  • onDataChange will only fire when you add, delete, move branch, change sibling positions and change text of nodes(when a node input loses focus)
  • specify the fields in fields as an array like ['id','createdAt'] to keep data clean when exporting, but ๐Ÿ‘‡
! WARNING: avoid passing in fields with already taken names, see above node structure

๐Ÿป Example

you can play around with the component <Nodemap /> even before adding any props, but be sure to add onDataChange func to update the var you passed into the value prop

React Class Component

import React, { Component } from 'react'

import Nodemap from 'react-nodemap'
import 'react-nodemap/dist/index.css'

class Example extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: [
        {
          name: 'some text',
          children:[ 
            {
              name: 'some other text',
              children:[]
            }
          ]
        }
      ]
    }
  }

  onDataChange = (value) =>{
    this.setState({
      data: value
    })
  }

  render() {
    return 
    <Nodemap 
      defaultValue={this.state.data} 
      onDataChange={this.onDataChange}
      depthLimit={4}
      fields={['id','createdAt']}// output fields will be ['name', 'children','id','createdAt'], others will be omitted
    />
  }
}

or

React Hooks Component

import React, {useState, useEffect} from 'react'
import Nodemap from 'react-nodemap'

import 'react-nodemap/dist/index.css'

const App = () => {
  const [data,setData] = useState([
    {
      name: 'some text',
      children:[ 
        {
          name: 'some other text',
          children:[]
        }
      ]
    }
  ])

  return (
    <div>
      <Nodemap 
        value={data} 
        onDataChange={(value) => setData(value)}
        depthLimit={0}
        fields={['color','depth','id']}
      />
    </div>
  )
}

๐Ÿ˜ต Known bugs๏ผˆthat currently no idea how to fix๏ผ‰

  • change siblings position downward sometimes will not work or maybe crash

License

MIT ยฉ ysqsimon