README
@o2xp/menu-react
@o2xp/menu-react is a modulable component to render a menu for your application. You can have as much nested level as you want, we use recursivity to build it.
Getting Started
Prerequisites
You need to use react-router-dom as routeur for your project.
Installing
$ npm i --save @o2xp/menu-react
In your file
// ES6
import {Menu} from '@o2xp/menu-react';
Example
let data = {
title: "My menu",
user: "morgan.dubois",
server: "localhost:8072",
menuItems: [
{
label: "Home",
path: "/",
icon: <HomeIcon/>
},
{
label: "Trades",
path: "/trades",
icon : <SwapHorizIcon/>
},
{
label: "Ref Data",
path: "/ref-data",
icon: <ListIcon/>,
subMenuItems: [
{
label: "Currencies",
path: "/ref-data/currencies",
icon: <OfflineBoltIcon/>,
subMenuItems: [
{
label: "Europe",
path: "/ref-data/currencies/europe",
icon: <ExtensionIcon/>
},
{
label: "US",
path: "/ref-data/currencies/us",
icon: <RoomIcon/>
}
]
},
{
label: "Spot Dates",
path: "/ref-data/spot-dates",
icon: <DateRangeIcon/>
}
]
}
]
}
In your render function :
<Menu title={data.title} user={data.user} server={data.server} menuItems={data.menuItems}/>
A complete basic running example can be found here.
Prop Types
Property | Type | Required? | Description |
---|---|---|---|
title | string | yes | Title of the menu. |
user | string | yes | Name of the user |
server | string | yes | Name of the server |
menuItems | array of object | yes | An array of object with these properties label (name of the category), path (path of the category), icon (icon of the category) and as optional subMenuItems which is the same nested object as himself. (see example just ahead) |
Built With
- React - A JavaScript library for building user interfaces
- Redux - Redux is a predictable state container for JavaScript apps
- Material-ui - React components that implement Google's Material Design
- Webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets.
- Babel - Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.
With the help of
- react-router-dom - Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering--so take your pick!
Authors
- Morgan Dubois - Initial work