Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BigBasket/ra-treemenu
A tree-like menu implementation for react-admin
https://github.com/BigBasket/ra-treemenu
menu-tree ra-menu ra-treemenu react-admin treeview
Last synced: 15 days ago
JSON representation
A tree-like menu implementation for react-admin
- Host: GitHub
- URL: https://github.com/BigBasket/ra-treemenu
- Owner: BigBasket
- License: mit
- Created: 2020-07-22T09:46:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-27T06:58:17.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T13:49:04.205Z (about 1 month ago)
- Topics: menu-tree, ra-menu, ra-treemenu, react-admin, treeview
- Language: JavaScript
- Homepage: http://tech.bigbasket.com
- Size: 256 KB
- Stars: 63
- Watchers: 9
- Forks: 21
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ra-treemenu
# For React-Admin 4.x support, please use [@bb-tech/ra-components](https://www.npmjs.com/package/@bb-tech/ra-components)
*A tree-like menu implementation for react-admin.*
Inspired 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.
**Supported react-admin versions:**
* React-Admin 3.x
* For React-Admin 4.x support, please use [@bb-tech/ra-components](https://www.npmjs.com/package/@bb-tech/ra-components)
# Installation
Install using npm:
`npm install --save @bb-tech/ra-treemenu`
# Basic Usage
To use `ra-treemenu` in your react-admin application:
1. 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.
```js
```
2. Now create a child resource under this parent by mapping the `menuParent` option in the `options` props to the `name` of your parent resource.
```js
```
This should give you a menu structure like below:
# Examples
Here's a simple example of organising the menu into a tree-like structure:
```js
// In App.js
import * as React from 'react';
import { Admin, Resource, Layout } from 'react-admin';
/* Import TreeMenu from the package */
import TreeMenu from '@bb-tech/ra-treemenu';
const App = () => (
} >
{/* Dummy parent resource with isMenuParent options as true */}
{/* Children menu items under parent */}
{/* Dummy parent resource with isMenuParent options as true */}
{/* Children menu items under parent */}
);
export default App;
```
You can find an example application implementing this tree menu in the `examples` directory.
# Advanced Recipes
### Using a Custom Layout
It is completely possible to use `ra-treemenu` inside your custom app layout.
Default label for dashboard menu is `Dashboard`. You can customize it.
```js
// In App.js
/* Import CustomLayout */
import CustomLayout from './CustomLayout';
const App = () => (
...
);
export default App;
```
```js
// In CustomLayout.js
/* Import TreeMenu from the package */
import TreeMenu from '@bb-tech/ra-treemenu';
const CustomLayout = (props) => {
TreeMenu.defaultProps.dashboardlabel = 'My Dashboard';
return
};
export default CustomLayout;
```
### Using Custom Icons for Resources
For icons, `ra-treemenu` depends upon [material-ui](https://material-ui.com/components/material-icons/) and the defaults for the resources are:
1. `ViewListIcon`: For all child resources.
2. `Label`: For all parent resources (non-routing).
To use a custom icon (for a parent or a child), pass it as a prop to the `` like:
```js
```
# License
`ra-treemenu` is licensed under [MIT License](./LICENSE.md), sponsored and supported by [BigBasket Tech](https://tech.bigbasket.com).