@o2xp/react-menu

@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