@o2xp/react-menudeprecated

@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.

Usage no npm install needed!

<script type="module">
  import o2xpReactMenu from 'https://cdn.skypack.dev/@o2xp/react-menu';
</script>

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