{"id":13622922,"url":"https://github.com/learn-anything/react-mindmap","last_synced_at":"2025-04-15T10:32:01.004Z","repository":{"id":57334591,"uuid":"91391408","full_name":"learn-anything/react-mindmap","owner":"learn-anything","description":"React component for MindNode maps","archived":true,"fork":false,"pushed_at":"2020-06-24T00:22:04.000Z","size":5623,"stargazers_count":425,"open_issues_count":0,"forks_count":108,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-10-28T22:14:13.675Z","etag":null,"topics":["mindmaps","react","react-component","rendering"],"latest_commit_sha":null,"homepage":"https://learn-anything.xyz","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learn-anything.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-15T22:47:04.000Z","updated_at":"2024-10-22T15:30:21.000Z","dependencies_parsed_at":"2022-09-06T13:11:10.265Z","dependency_job_id":null,"html_url":"https://github.com/learn-anything/react-mindmap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learn-anything%2Freact-mindmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learn-anything%2Freact-mindmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learn-anything%2Freact-mindmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learn-anything%2Freact-mindmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learn-anything","download_url":"https://codeload.github.com/learn-anything/react-mindmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223668551,"owners_count":17182947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mindmaps","react","react-component","rendering"],"created_at":"2024-08-01T21:01:25.781Z","updated_at":"2024-11-08T10:31:26.851Z","avatar_url":"https://github.com/learn-anything.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Mindmap [UNMAINTAINED]\n\n\u003e React component for [MindNode](https://mindnode.com/) maps (or other mindmaps)\n\n**This project is no longer maintained. The component is still usable, but if you find any problem or if you want to improve it, please fork it.**\n\n## Install\n\n`npm install react-mindmap --save`\n\n## Usage\n\n```js\nimport { Component } from \"react\";\nimport { render } from \"react-dom\";\nimport MindMap from \"react-mindmap\";\nimport { nodes, connections } from \"./my-map.json\";\n\nclass Example extends Component {\n  render() {\n    return (\n      \u003cMindMap nodes={this.props.nodes} connections={this.props.connections} /\u003e\n    );\n  }\n}\n\nrender(\n  \u003cExample nodes={nodes} connections={connections} /\u003e,\n  document.getElementById(\"target\")\n);\n```\n\n![img](https://raw.githubusercontent.com/learn-anything/react-mindmap/master/screenshot.png)\n\n## Testing\n\nTo test this repository run these commands\n\n```\ngit clone https://github.com/learn-anything/react-mindmap\ncd react-mindmap\nnpm install \u0026\u0026 npm run test\n```\n\nand connect to http://localhost:3000/\n\n## Parser\n\nThis repo also has a parser that automates the conversion of JSON maps from MindNode\nto the format used by this component. To use it run:\n\n```\nnpm run parse path/to/mindnode/maps path/to/converted/maps\n```\n\n## Props\n\n| Prop            |  Type   | Default | Description                                            |\n| --------------- | :-----: | ------- | ------------------------------------------------------ |\n| **nodes**       |  Array  | []      | Array of objects used to render nodes.                 |\n| **connections** |  Array  | []      | Array of objects used to render connections.           |\n| **subnodes**    |  Array  | []      | Array of objects used to render subnodes.              |\n| **editable**    | Boolean | false   | Enable editor mode, which allows to move around nodes. |\n\n### nodes\n\nArray of objects used to render nodes. Below an example of the node structure.\n\n```json\n{\n  \"text\": \"python\",\n  \"url\": \"http://www.wikiwand.com/en/Python_(programming_language)\",\n  \"fx\": -13.916222252976013,\n  \"fy\": -659.1641376795345,\n  \"category\": \"wiki\",\n  \"note\": \"\"\n}\n```\n\nThe possible attributes are:\n\n- **text**: title of the node\n- **url**: url contained in the node\n- **fx** and **fy**: coordinates (if not present they'll be generated)\n- **category**: category used to generate an emoji\n- **note**: note that will be visible on hover\n\n### connections\n\nArray of objects used to render connections. Below an example of the connection\nstructure.\n\n```json\n{\n  \"source\": \"python\",\n  \"target\": \"basics\",\n  \"curve\": {\n    \"x\": -43.5535,\n    \"y\": 299.545\n  }\n}\n```\n\nThe possible attributes are:\n\n- **source**: title of the node where the connection starts\n- **target**: title of the node where the connection ends\n- **curve.x** and **curve.y**: coordinates of the control point of a quadratic bezier curve\n  (if not specified the connection will be straight)\n\n### subnodes\n\nArray of objects used to render subnodes. The structure is the same as for nodes\nwith two additional attributes:\n\n- **parent**: title of the parent node\n- **color**: used for the margin color, needs to be a valid CSS color\n\n## Styling\n\nHere's a list of all CSS classes for styling:\n\n- **.mindmap-svg**: main `svg` element containing the map;\n- **.mindmap-node**: `foreignObject` element representing a node;\n- **.mindmap-node--editable**: `foreignObject` element representing a node in editor mode;\n- **.mindmap-subnode-group-text**: `foreignObject` element containing all subnodes of a given node;\n- **.mindmap-subnode-text**: `div` element containing a subnode;\n- **.mindmap-connection**: `path` element for each connection;\n- **.mindmap-emoji**: `img` tag for emoji\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearn-anything%2Freact-mindmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearn-anything%2Freact-mindmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearn-anything%2Freact-mindmap/lists"}