npm install mini-xmind --save-devCheck 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} />
</>
);
};$ git clone https://github.com/orzyyyy/mini-xmind.git
$ cd mini-xmind
$ npm install
$ npm startOpen your browser and visit http://localhost:9099
npm test
No prop for now, just render
| 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent