Mindx

Mindx is a free, open source mindmap editor based on React.

Try it on https://mindx.applet.ink

Installation

npm i mindx

Quick Start

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Mindmap } from 'mindx';

const App = () => {
  function onChange(root) {
    console.log(root)
  }
  return (
    <div>
      <Mindmap onChange={onChange} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

API

Mindmap props

| prop | type | description | default | optional | | -------- | ---------------------------- | ------------------------------ | ------- | -------- | | value | TopicData | control mindmap value | - | true | | readonly | boolean | is mindmap readonly | false | true | | onChange | (value: TopicData) => void | listen to mindmap value change | - | true | | locale | 'en' | 'cn' | 'ja' | language localization | en | true | | theme | Theme | custom theme | - | true |

TopicData

interface TopicData {
  id: string;
  title: string;
  side?: 'left' | 'right';
  children?: {
      attached: Array<TopicData>;
  };
}

Theme

interface Theme {
  link: {
    stroke: string;
    strokeWidth: number;
  };
  topic: {
    borderColor: string;
  };
  canvasWidth: number;
  canvasHeight: number;
}

License

MIT License