# la-map > React component for rendering learn-anything maps Latest version **0.5.1** (published 2017-11-11) · MIT license · 0 weekly downloads ## Install ```sh npm install la-map pnpm add la-map yarn add la-map bun add la-map ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.5.1 | | Published | 2017-11-11 | | First published | 2017-10-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 10 | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Maintainers | nglgzz | | Keywords | react-component, visualization, learn-anything, mindmap, react | ## Links - npm: https://www.npmjs.com/package/la-map - Repository: https://github.com/learn-anything/la-map - Homepage: https://github.com/learn-anything/la-map#readme - Issues: https://github.com/learn-anything/la-map/issues - npm.io page: https://npm.io/package/la-map ## Dependencies (10) - [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 - [fs-extra](https://npm.io/package/fs-extra.md) ^4.0.2 - [react-dom](https://npm.io/package/react-dom.md) ^16.0.0 - [uglify-js](https://npm.io/package/uglify-js.md) ^3.1.3 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.0 - [static-server](https://npm.io/package/static-server.md) ^2.0.5 - [d3-flextree-v4](https://npm.io/package/d3-flextree-v4.md) ^1.0.1 - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1 ## 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 - 0.5.1 (latest) — 2017-11-11 - 0.5.0 — 2017-11-11 - 0.4.2 — 2017-11-05 - 0.4.1 — 2017-11-05 - 0.4.0 — 2017-11-05 - 0.3.0 — 2017-10-28 - 0.2.1 — 2017-10-22 - 0.2.0 — 2017-10-21 - 0.1.2 — 2017-10-08 - 0.1.1 — 2017-10-08 - 0.1.0 — 2017-10-08 ## README [![NPM](https://nodei.co/npm/la-map.png)](https://www.npmjs.com/package/la-map) # LA Map A React component for [Learn Anything](https://learn-anything.xyz/) maps (or other mindmaps). ## Installation npm install la-map --save ## Usage ```js import { Component } from 'react'; import { render } from 'react-dom'; import LAMap from 'la-map'; import { nodes, resources } 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/la-map cd la-map npm install && npm run test ``` and connect to http://localhost:4000/ ## Props | Prop | Type | Default | Description | |-----------------|:-------:|---------|----------------------------------------------------------------------| | **nodes** | Object | | Object containing IDs of nodes as keys and child nodes as values. | | **resources** | Object | | Object containing IDs of nodes as keys and child resources as values.| ### nodes Object containing IDs of nodes as keys and child nodes as values. **Note** The root node, has parent `null`, and has only an object as key. **Example** ```js { null: { "mapID": 1882, "text": "front end", "nodeID": 7357, "parentID": null }, 7357: [ { "mapID": 1882, "text": "help", "nodeID": 7358, "parentID": 7357 }, { "mapID": 1882, "text": "basics", "nodeID": 7359, "parentID": 7357 } ], 7359: [ { "mapID": 1882, "text": "CSS ️", "nodeID": 7389, "parentID": 7359 }, { "mapID": 1882, "text": "javascript ️", "nodeID": 7362, "parentID": 7359 }, { "mapID": 1882, "text": "HTML ️", "nodeID": 7360, "parentID": 7359 } ] } ``` This object would render a tree that looks like this: ``` front end (#7357) ├── help (#7358) └── basics (#7359) ├── CSS (#7389) ├── javascript (#7362) └── HTML (#7360) ``` The possible attributes for each node are: - **mapID**: ID of the map containing this node - **text**: title of the node - **nodeID**: ID of this node - **parentID**: ID of the parent node ### resources Object containing IDs of nodes as keys and child resources as values. **Example** ```js { null: { "mapID": 1882, "text": "front end", "nodeID": 7357, "parentID": null }, 7357: [ { "mapID": 1882, "text": "help", "nodeID": 7358, "parentID": 7357 }, { "mapID": 1882, "text": "basics", "nodeID": 7359, "parentID": 7357 } ], 7359: [ { "mapID": 1882, "text": "CSS ️", "nodeID": 7389, "parentID": 7359 }, { "mapID": 1882, "text": "javascript ️", "nodeID": 7362, "parentID": 7359 }, { "mapID": 1882, "text": "HTML ️", "nodeID": 7360, "parentID": 7359 } ] } ``` This object would render a tree that looks like this: ``` front end (#7357) ├── help (#7358) └── basics (#7359) ├── CSS (#7389) ├── javascript (#7362) └── HTML (#7360) ``` The possible attributes for each node are: - **mapID**: ID of the map containing this node - **text**: title of the node - **nodeID**: ID of this node - **parentID**: ID of the parent node ## 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/la-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._