# react-mindmap
> React component for rendering mind maps
Latest version **2.1.6** (published 2018-06-19) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-mindmap
pnpm add react-mindmap
yarn add react-mindmap
bun add react-mindmap
```
Provides the command `react-mindmap-parse`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.1.6 |
| Published | 2018-06-19 |
| First published | 2017-05-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 204.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | nglgzz |
| Keywords | react-component, visualization, mindnode, mindmap, react |
## Links
- npm: https://www.npmjs.com/package/react-mindmap
- Repository: https://github.com/learn-anything/react-mindmap
- Homepage: https://github.com/learn-anything/react-mindmap#readme
- Issues: https://github.com/learn-anything/react-mindmap/issues
- npm.io page: https://npm.io/package/react-mindmap
## Dependencies (6)
- [d3](https://npm.io/package/d3.md) ^4.9.1
- [react](https://npm.io/package/react.md) ^16.0.0
- [fs-walk](https://npm.io/package/fs-walk.md) 0.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [static-server](https://npm.io/package/static-server.md) ^2.0.5
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.1.6 (latest) — 2018-06-19
- 2.2.0 — 2017-10-01
- 2.1.5 — 2017-09-04
- 2.1.4 — 2017-08-20
- 2.1.3 — 2017-07-30
- 2.1.2 — 2017-07-17
- 2.1.1 — 2017-07-17
- 2.1.0 — 2017-07-17
- 2.0.14 — 2017-07-16
- 2.0.13 — 2017-07-16
- 2.0.12 — 2017-07-15
- 2.0.11 — 2017-07-15
- 2.0.10 — 2017-07-15
- 2.0.9 — 2017-07-15
- 2.0.8 — 2017-06-26
- … 27 more at https://npm.io/package/react-mindmap/versions
## README
[](https://npmjs.org/package/react-mindmap)
# React Mindmap [UNMANTAINED]
**This project is no longer maintained. The component is still usable, but if you find any problem or if you want to improve it, you're welcome to submit a PR.**
A React component for [MindNode](https://mindnode.com/) maps (or other mindmaps).
## Installation
npm install react-mindmap --save
## Usage
```js
import { Component } from 'react';
import { render } from 'react-dom';
import MindMap from 'react-mindmap';
import { nodes, connections } from './my-map.json';
class Example extends Component {
render() {
return (
);
}
}
render(
,
document.getElementById('target')
);
```
## Testing
To test this repository run these commands
```
git clone https://github.com/learn-anything/react-mindmap
cd react-mindmap
npm install && npm run test
```
and connect to http://localhost:3000/
## Parser
This repo also has a parser that automates the conversion of JSON maps from MindNode
to the format used by this component. To use it run:
```
npm run parse path/to/mindnode/maps path/to/converted/maps
```
## Props
| Prop | Type | Default | Description |
|-----------------|:-------:|---------|--------------------------------------------------------|
| **nodes** | Array | [] | Array of objects used to render nodes. |
| **connections** | Array | [] | Array of objects used to render connections. |
| **subnodes** | Array | [] | Array of objects used to render subnodes. |
| **editable** | Boolean | false | Enable editor mode, which allows to move around nodes. |
### nodes
Array of objects used to render nodes. Below an example of the node structure.
```json
{
"text": "python",
"url": "http://www.wikiwand.com/en/Python_(programming_language)",
"fx": -13.916222252976013,
"fy": -659.1641376795345,
"category": "wiki",
"note": ""
}
```
The possible attributes are:
- **text**: title of the node
- **url**: url contained in the node
- **fx** and **fy**: coordinates (if not present they'll be generated)
- **category**: category used to generate an emoji
- **note**: note that will be visible on hover
### connections
Array of objects used to render connections. Below an example of the connection
structure.
```json
{
"source": "python",
"target": "basics",
"curve": {
"x": -43.5535,
"y": 299.545
}
}
```
The possible attributes are:
- **source**: title of the node where the connection starts
- **target**: title of the node where the connection ends
- **curve.x** and **curve.y**: coordinates of the control point of a quadratic bezier curve
(if not specified the connection will be straight)
### subnodes
Array of objects used to render subnodes. The structure is the same as for nodes
with two additional attributes:
- **parent**: title of the parent node
- **color**: used for the margin color, needs to be a valid CSS color
## Styling
Here's a list of all CSS classes for styling:
- **.mindmap-svg**: main `svg` element containing the map;
- **.mindmap-node**: `foreignObject` element representing a node;
- **.mindmap-node--editable**: `foreignObject` element representing a node in editor mode;
- **.mindmap-subnode-group-text**: `foreignObject` element containing all subnodes of a given node;
- **.mindmap-subnode-text**: `div` element containing a subnode;
- **.mindmap-connection**: `path` element for each connection;
- **.mindmap-emoji**: `img` tag for emoji
## Contributing
If you want a new feature added, you find bugs or you want to help making some changes,
feel free to open an issue or submit a pull request. Any help would be greatly appreciated :heart:
---
_Source: https://npm.io/package/react-mindmap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._