Skip to content

orzyyyy/mini-xmind

Repository files navigation

codecov

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