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/peko-bot/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 |