{"_id":"@dougley/ra-treemenu","_rev":"1-f83e838a975226ae9df9f01e07216898","name":"@dougley/ra-treemenu","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.4":{"name":"@dougley/ra-treemenu","version":"1.0.4","description":"A tree-like menu implementation for react-admin applications.","author":{"name":"BigBasket Tech"},"repository":{"type":"git","url":"git+https://github.com/BigBasket/ra-treemenu.git"},"license":"MIT","keywords":["ra-tree","ra-menu","ra-tree-menu","ra-menu-tree","ra-menutree","tree-menu","tree","menu","react-admin","ra"],"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.js","engines":{"node":">=10.16"},"scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"npm run build","predeploy":"cd examples/ra-3_x && npm install && npm run build","deploy":"gh-pages -d examples/ra-3_x/build"},"peerDependencies":{"@material-ui/core":"~4.11.4","@material-ui/icons":"~4.11.2","prop-types":"^15.7.2","react":"^17.0.2","react-admin":"~3.15.0","react-dom":"^17.0.2","react-redux":"^7.2.4"},"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^10.0.3","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-decorators-legacy":"^1.3.5","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^7.0.3","gh-pages":"^3.1.0","npm-run-all":"^4.1.5","prettier":"^2.2.1","react-scripts":"^4.0.3","rollup":"^2.47.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.1","rollup-plugin-node-resolve":"^3.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-url":"^1.3.0"},"gitHead":"6c52dc0b9a5498f91582ba7997f754cd5b091555","bugs":{"url":"https://github.com/BigBasket/ra-treemenu/issues"},"homepage":"https://github.com/BigBasket/ra-treemenu#readme","_id":"@dougley/ra-treemenu@1.0.4","_nodeVersion":"14.16.1","_npmVersion":"7.11.2","dist":{"integrity":"sha512-gwb+1RYHb3sTfFoJA68KRcgKHXHBKpINoUC4i5zyJsZahY+LE3pR4+iFsTTPleetql4SEjiqRDvHZ2axoY1INg==","shasum":"e2e09382339cac80a54bb1bacd1f9f0afe832671","tarball":"https://registry.npmjs.org/@dougley/ra-treemenu/-/ra-treemenu-1.0.4.tgz","fileCount":5,"unpackedSize":34624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglTgfCRA9TVsSAnZWagAAqfQP/R5mJbj/uc9pUchjCtsk\nI2FeKJ85U/eYi/NuzKloBTpvgXtBDNi+BNjOKRvRXTZVFUziccYd4Lgxowf9\nwzOwb4SCuM0tvwpXhVsnSyfZxRcawn9Q94nPEzBpXcvPncEp5M33S9OwQOzB\nY3cOLRRNW5ICTVuri3t8J8U7+2UO8HQYJ39Jl1OpOxrYYOdtN16QX4s/Dysa\n9Xdo1r2s3O8uP+3tp2b36sJkJR3VXuCxQYOP1Bz9PgeQaGgQRV/+WI8FNJbC\nMzuhpUxZ5JeEQ2l8UyEggtJhgpYZ5qkUEJwJvZ1Vj5ywyb+nzZly3udr/t8q\niH0dNvpb52l+x52troaDq1oaP8HS0q3cAw7czeC/74t5NMu8Yg9kQJRKR02w\ncWkR6lRPKEa649QYM6xPxK2HtSZCsmOlMcvLqTXNAfDpAXCfOVynil8BDB4x\nPZh6YRcWcatkdB2z+vUwaoWWjpUKY7IAbM8g4u4YgLegAYh1b/0Surfx0Y4q\non1xUc2T9Zg/AJXJmBHEFZNMcKX4iui8PThMmOlkPdU7GhMNZFZMmGk+qEyH\nZfjimyHjkr6B0rziSBJwuwPyuv2kKpQpFCoYYtn4uEm71FW10NLu+ZmzxblY\n/E6G5EYo1dWGkgFvpJ9Dtw5CBN+oz670jk6zGpk0FummXaW8207pucQZ0/zX\nOdfG\r\n=bwuZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD828zdrF3HB4iWWXdA8EnyID3XQBqceGZRW7/grNRi2AIhAIIjChBTOTEvnNzQ917GFbnfbohve1A7ycmYSnaZf1lY"}]},"_npmUser":{"name":"dougley","email":"hello@dougley.com"},"directories":{},"maintainers":[{"name":"dougley","email":"hello@dougley.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ra-treemenu_1.0.4_1620391966527_0.060731856763988734"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-07T12:52:46.471Z","1.0.4":"2021-05-07T12:52:46.906Z","modified":"2022-04-05T05:30:33.390Z"},"maintainers":[{"name":"dougley","email":"hello@dougley.com"}],"description":"A tree-like menu implementation for react-admin applications.","homepage":"https://github.com/BigBasket/ra-treemenu#readme","keywords":["ra-tree","ra-menu","ra-tree-menu","ra-menu-tree","ra-menutree","tree-menu","tree","menu","react-admin","ra"],"repository":{"type":"git","url":"git+https://github.com/BigBasket/ra-treemenu.git"},"author":{"name":"BigBasket Tech"},"bugs":{"url":"https://github.com/BigBasket/ra-treemenu/issues"},"license":"MIT","readme":"# ra-treemenu\n\n*A tree-like menu implementation for react-admin.*\n\nInspired from the official react-admin [demo application](https://marmelab.com/react-admin-demo/#/), this package facilitates quick and easy integration of the menu tree in any new or existing react-admin app.\n\n\n**Supported react-admin versions:**\n\n* React-Admin 3.x\n\n<img src=\"./assets/ra-demo.png\" alt=\"React Admin Demo\">\n\n\n# Installation\n\nInstall using npm:\n\n`npm install --save @bb-tech/ra-treemenu`\n\n# Basic Usage\n\nTo use `ra-treemenu` in your react-admin application:\n\n1. Create a parent resource (non-routing) with the following key in the options prop: `isMenuParent = true`. Remember to pass the mandatory `name` prop in this resource as this will be used to map the child resource to it's specified parent in the tree.\n\n```js\n<Resource name=\"users\" options={{ \"label\": \"Users\", \"isMenuParent\": true }} />\n```\n\n2. Now create a child resource under this parent by mapping the `menuParent` option in the `options` props to the `name` of your parent resource.\n\n```js\n<Resource name=\"posts\" options={{ \"label\": \"Posts\", \"menuParent\": \"users\" }} />\n```\n\nThis should give you a menu structure like below:\n\n<img src=\"./assets/tree.png\" alt=\"Tree Image\">\n\n# Examples\n\n\nHere's a simple example of organising the menu into a tree-like structure:\n\n```js\n// In App.js\nimport * as React from 'react';\nimport { Admin, Resource, Layout } from 'react-admin';\n/* Import TreeMenu from the package */\nimport TreeMenu from '@bb-tech/ra-treemenu';\n\nconst App = () => (\n    <Admin layout={(props) => <Layout {...props} menu={TreeMenu} />} >\n        {/* Dummy parent resource with isMenuParent options as true */}\n        <Resource name=\"users\" options={{ \"label\": \"Users\", \"isMenuParent\": true }} />\n        {/* Children menu items under parent */}\n        <Resource name=\"posts\" options={{ \"label\": \"Posts\", \"menuParent\": \"users\" }} />\n        <Resource name=\"comments\" options={{ \"label\": \"Comments\", \"menuParent\": \"users\" }} />\n        {/* Dummy parent resource with isMenuParent options as true */}\n        <Resource name=\"groups\" options={{ \"label\": \"Groups\", \"isMenuParent\": true }} />\n        {/* Children menu items under parent */}\n        <Resource name=\"members\" options={{ \"label\": \"Members\", \"menuParent\": \"groups\" }} />\n    </Admin>\n);\n\nexport default App;\n```\n\nYou can find an example application implementing this tree menu in the `examples` directory.\n\n\n# Advanced Recipes\n\n### Using a Custom Layout\n\nIt is completely possible to use `ra-treemenu` inside your custom app layout.\n\n```js\n// In App.js\n/* Import CustomLayout */\nimport CustomLayout from './CustomLayout';\n \nconst App = () => (\n    <Admin layout={CustomLayout}>\n        ...\n    </Admin>\n);\n\nexport default App;\n```\n\n```js\n// In CustomLayout.js\n/* Import TreeMenu from the package */\nimport TreeMenu from '@bb-tech/ra-treemenu';\n \nconst CustomLayout = (props) => (\n    <Layout {...props} menu={TreeMenu} />\n);\n\nexport default CustomLayout;\n```\n\n### Using Custom Icons for Resources\n\nFor icons, `ra-treemenu` depends upon [material-ui](https://material-ui.com/components/material-icons/) and the defaults for the resources are:\n1. `ViewListIcon`: For all child resources.\n2. `Label`: For all parent resources (non-routing).\n\nTo use a custom icon (for a parent or a child), pass it as a prop to the `<Resource>` like:\n\n```js\n<Resource name=\"posts\" icon={CustomIcon} options={{ \"label\": \"Posts\", \"menuParent\": \"users\" }} />\n```\n\n# License\n\n`ra-treemenu` is licensed under [MIT License](./LICENSE.md), sponsored and supported by [BigBasket Tech](https://tech.bigbasket.com).","readmeFilename":"README.md"}