Remind
Remind is a free, open source mindmap editor based on React.
Try it on https://remind.applet.ink
Status
- Basic editor feature have been implemented (undo, redo, navigation, drag, CRUD topic, shortcut support)
- Support basic customization
This project is under active development, check it out at project panel
Installation
npm i remindjs
Quick Start
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Mindmap } from 'remindjs';
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;
};
mainColor: string;
canvasWidth: number;
canvasHeight: number;
}