Install

npm install mini-xmind --save-dev

Usage

Check dataSource here.

import React, { useState, useEffect } from 'react';
import { Canvas, Toolbar } from 'mini-xmind';

const dataSource = {...};

export default () => {
  const [data, setData] = useState({});

  useEffect(() => {
    setData(dataSource);
  }, []);

  const onChange = newData => {
    setData(newData);
  };

  return (
    <>
      <Toolbar />
      <Canvas className="canvas-wrapper" data={data} onChange={onChange} />
    </>
  );
};

Development

$ git clone https://github.com/orzyyyy/mini-xmind.git
$ cd mini-xmind
$ npm install
$ npm start

Open your browser and visit http://localhost:9099

Test Case

npm test

API

Toolbar props

No prop for now, just render

Canvas props

Property	Description	Type	Default
data	what you want to paint in canvas	DataSource	{}
onChange	return all data when dragging or typing in TagGroup	(dataCollector: DataSource) => void	-
orientation	the direction of Line startting	enum, ['horizonal', 'vertical']	horizonal