{"id":13436407,"url":"https://github.com/MandarinConLaBarba/react-tree-menu","last_synced_at":"2025-03-18T21:30:28.904Z","repository":{"id":27440755,"uuid":"30918871","full_name":"MandarinConLaBarba/react-tree-menu","owner":"MandarinConLaBarba","description":"A stateless tree menu component for React.","archived":false,"fork":false,"pushed_at":"2018-01-31T13:09:18.000Z","size":841,"stargazers_count":170,"open_issues_count":18,"forks_count":49,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-13T11:40:49.644Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://mandarinconlabarba.github.io/react-tree-menu/example/index.html","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/MandarinConLaBarba.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":"2015-02-17T13:50:04.000Z","updated_at":"2023-09-01T00:05:16.000Z","dependencies_parsed_at":"2022-08-31T22:00:34.273Z","dependency_job_id":null,"html_url":"https://github.com/MandarinConLaBarba/react-tree-menu","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/MandarinConLaBarba%2Freact-tree-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MandarinConLaBarba%2Freact-tree-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MandarinConLaBarba%2Freact-tree-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MandarinConLaBarba%2Freact-tree-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MandarinConLaBarba","download_url":"https://codeload.github.com/MandarinConLaBarba/react-tree-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244310266,"owners_count":20432504,"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":[],"created_at":"2024-07-31T03:00:47.800Z","updated_at":"2025-03-18T21:30:28.327Z","avatar_url":"https://github.com/MandarinConLaBarba.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Components","Demos"],"sub_categories":["Uncategorized","Menu"],"readme":"## React Tree Menu Component\n\nA stateless tree component with the following features:\n\n* Checkboxes\n* Collapsible nodes\n* Dynamic tree generation\n* Declarative tree menus\n* Built with the Flux proposal in mind (i.e. trickle-down state)\n\n## Please check out the [Demo](http://mandarinconlabarba.github.io/react-tree-menu/example/index.html).\n\n## Install\n\n```\nnpm install --save react-tree-menu\n```\n\n## General Usage\n\n```\n\nvar TreeMenu = require('react-tree-menu').TreeMenu,\n    TreeNode = require('react-tree-menu').TreeNode;\n\n    ...\n\n    \u003cTreeMenu/\u003e\n    \u003cTreeMenu\u003e\n        \u003cTreeNode/\u003e\n    \u003c/TreeMenu\u003e\n\n```\n\n## Exports\n\nThis package exports the following:\n\n```\nmodule.exports = {\n  TreeMenu: require('./src/TreeMenu.jsx'),\n  TreeNode: require('./src/TreeNode.jsx'),\n  Utils: require('./src/TreeMenuUtils')\n};\n\n```\n\n## Declarative use\n\nIn your `.render()` method, embed `TreeMenu`:\n\n```jsx\n\n      return \u003cTreeMenu\n        identifier={\"id\"}\n        onTreeNodeClick={this._setLastActionState.bind(this, \"clicked\")}\n        onTreeNodeCheckChange={this._setLastActionState.bind(this, \"checked\")}\n        collapsible={false}\n        expandIconClass=\"fa fa-chevron-right\"\n        collapseIconClass=\"fa fa-chevron-down\"\u003e\n        \u003cTreeNode label=\"Option 1\" id=\"option_1\"/\u003e\n        \u003cTreeNode label=\"Option 2\" collapsible={false} id=\"option_2\"\u003e\n          \u003cTreeNode label=\"Option A\" checkbox={true} id=\"option_2.a\"/\u003e\n          \u003cTreeNode label=\"Option B\" checkbox={true} id=\"option_2.b\"/\u003e\n        \u003c/TreeNode\u003e\n        \u003cTreeNode label=\"Option 3\" id=\"option_3\"/\u003e\n        \u003cTreeNode label=\"Option 4\" id=\"option_4\"/\u003e\n      \u003c/TreeMenu\u003e;\n\n```\n\n\n## Dynamic use w/ the 'data' prop\n\nIn your `.render()` method, embed `TreeMenu` with a `data` prop:\n\n```jsx\n\nvar data = [{\n             label : \"Option 1\"\n           },\n           {\n             label : \"Option 2\",\n             children : [\n               {\n                 checkbox: true,\n                 label: \"Sub Option A\",\n                 children: [\n                   {\n                     label: \"Third Level Nest Option 1\",\n                     checkbox : true\n                   },\n                   {\n                     label: \"Third Level Nest Option 2\",\n                     checkbox : true\n                   }\n                 ]\n               },\n               {\n                 checkbox: true,\n                 label: \"Sub Option B\"\n               }\n             ]\n           }];\n\n      return \u003cTreeMenu\n        onTreeNodeClick={...}\n        onTreeNodeCollapseChange={...}\n        onTreeNodeCheckChange={...}\n        data={data} /\u003e;\n\n```\n\n## `\u003cTreeMenu/\u003e` Style Guide\n\nTo style `\u003cTreeMenu/\u003e`, use the following props:\n\n* [classNamePrefix](#classnameprefixstring)\n* [expandIconClass](#expandiconclassstring)\n* [collapseIconClass](#collapseiconclassstring)\n\nSee the [example CSS](example/tree-view.css) for how this works.\n\n## `\u003cTreeMenu/\u003e` Props\n\n### `sort={\u003cBoolean\u003e || \u003cFunction\u003e}`\n\n* If sort is a `Boolean` and true (i.e. `\u003cTreeMenu sort ... /\u003e`), the node label will be used for sorting.\n* If sort is a `Function`, it will be used as the sort function, with the argument the `React` element (props are available for sorting). Example:\n\n```\n\u003cTreeMenu sort={(node) =\u003e node.props.value} ... /\u003e\n```\n\n\n### `stateful={\u003cBoolean\u003e}`\n\nIf you need it, you can make `\u003cTreeMenu/`\u003e keep track of its own state. That being said, `react-tree-menu` was designed to\nfit inside Flux architecture, which encourages components to render based on props passed from the Controller-View. Defaults to false.\n\n### `classNamePrefix={\u003cString\u003e}`\n\nThe prefix to put in front of all the CSS classes for nested element (like the container for the menu, the checkbox, etc)\n\n### `identifier={\u003cString\u003e}`\n\nOptional prop/field to use for the node identifier. Defaults to Array index\n\n### `collapsible={\u003cBoolean\u003e}`\n\nWhether or not nested \u003cTreeNode/\u003e components are collapsible. Defaults to true.\n\n### `expandIconClass={\u003cString\u003e}`\n\nThe CSS class to give the expand icon component. Empty by default.\n\n### `collapseIconClass={\u003cString\u003e}`\n\nThe CSS class to give the collapse icon component. Empty by default\n\n### `labelFilter={\u003cFunction\u003e}`\n\nA function that can be used to filter/transform the label. Empty by default\n\n### `labelFactory={\u003cFunction\u003e}`\n\nA factory function that returns a label node. See example source for usage.\n\n### `checkboxFactory={\u003cFunction\u003e}`\n\nA factory function that returns a checkbox node. See example source for usage.\n\n### `onTreeNodeClick={\u003cFunction\u003e}`\n\nFunction handler for click event on \u003cTreeNode /\u003e components. If the `TreeNode` has an `onTreeNodeSelectChange` handler, this is not fired. See [Callback API](#callback-api-for-treemenu-event-handler-props). Defaults to noop.\n\n### `onTreeNodeCollapseChange={\u003cFunction\u003e}`\n\nFunction handler for collapse change event on \u003cTreeNode /\u003e components. See [Callback API](#callback-api-for-treemenu-event-handler-props). Defaults to noop.\n\n### `onTreeNodeCheckChange={\u003cFunction\u003e}`\n\nFunction handler for checkbox change event on \u003cTreeNode /\u003e components. See [Callback API](#callback-api-for-treemenu-event-handler-props). Defaults to noop.\n\n### `onTreeNodeSelectChange={\u003cFunction\u003e}`\n\nFunction handler for select state change event on \u003cTreeNode /\u003e components. An alternative for cases when checkboxes aren't desired. See [Callback API](#callback-api-for-treemenu-event-handler-props). Defaults to noop.\n\n### `data={\u003cArray\u003e||\u003cObject\u003e}`\n\nThe data to use when building \u003cTreeNode/\u003e components dynamically. Required if there aren't any nested `\u003cTreeNode/\u003e` elements declared.\n\nSample array format:\n\n```\n\n    [{label : \"Option 1\"},\n     {\n      label : \"Option 2\",\n      children : [\n        {\n         checkbox: true,\n         label: \"Sub Option A\",\n         children: [{\n                     label: \"Third Level Nest Option 1\",\n                     checkbox : true,\n                     children : {...},\n                   }]\n               },\n        {\n         checkbox: true,\n         label: \"Sub Option B\"\n        }]}]\n\n```\n\nSample object format:\n\n```\n\n    {\n        \"Option 1\" : {\n          checked: true,\n          checkbox: true,\n          children: {\n            \"Sub Option 1\" : {\n              checked: false\n            },\n            \"Sub Option 2\" : {\n              checked: false,\n              checkbox: true,\n              children: {\n                \"Sub-Sub Option 1\" : {\n                  checked: false,\n                  checkbox: true\n                },\n                \"Sub-Sub Option 2\" : {\n                  checked: false,\n                  checkbox: true\n                }\n              }\n            }\n          }\n        },\n        \"Option 2\" : {\n          checked: false,\n          checkbox: true\n        }\n      }\n\n```\n\n## Callback API for `\u003cTreeMenu/\u003e` event handler props\n\n`\u003cTreeMenu/\u003e` callbacks will receive an array representation of the node. Example:\n\n```\n\n    var onClick = function(node) {\n\n        //node is in format: [\u003ctopLevelId\u003e, [...\u003cnodeId\u003e,] \u003cnodeId\u003e]\n        //where \u003cnodeId\u003e is the \u003cTreeNode/\u003e that sourced the event\n        //...\n    }\n\n    return \u003cTreeMenu onTreeNodeClick={onClick} /\u003e;\n\n```\n\n\n## `\u003cTreeNode /\u003e` Props\n\n### `label={\u003cString\u003e}`\n\nThe node label. Required.\n\n### `checkbox={\u003cBoolean\u003e}`\n\nWhether or not the node has a checkbox. Defaults to false. If the node checkbox={true}, clicking on the label also fires the `onTreeNodeCheckChange` function\n\n### `checked={\u003cBoolean\u003e}`\n\nIf the node has a checkbox, whether or not the node is checked. If the node checkbox={true}, clicking on the label also fires the `onTreeNodeCheckChange`\nfunction instead od the `onTreeNodeClick` function\n\n### `selected={\u003cBoolean\u003e}`\n\nWhether or not the node is selected. An alternative to using `checked` in conjunction w/ `checkbox`.\n\n### `collapsible={\u003cBoolean\u003e}`\n\nWhether or not the node is collapsible. If the node has no children, this value has no effect. Defaults to true.\nThis value is overridden by the `collapsible` prop value set on the root `\u003cTreeMenu/\u003e`\n\n### `collapsed={\u003cBoolean\u003e}`\n\nIf the node is collapsible, whether or not the node is collapsed. Defaults to false.\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMandarinConLaBarba%2Freact-tree-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMandarinConLaBarba%2Freact-tree-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMandarinConLaBarba%2Freact-tree-menu/lists"}