JSPM – react-npm-menu@1.5.0

Package Exports

react-npm-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-npm-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A React menu for the user to navigate around the site. Future versions of this menu will include access controls, that will show / hide items on the menu.

Overview

A side menu for the user to navigate around the site. Future versions of this menu will include access controls, that will show / hide items on the menu.

<Menu params={data}/>;

Params in more detail:

This is a full params object in all it's glory. See details about each key below.

{
  "currentRoute": "/",
  "menuItems": [
    {
      "name": "MY SITES",
      "route": "/mysites",
      "valign": "top"
    },
        {
      "name": "CONNECTION STATUS",
      "route": "/connection_status",
      "valign": "top"
    },
    {
      "name": "WETSTOCK LIVE ANALYTICS",
      "route": "/wetstock_live",
      "valign": "top",
      "children": [
        {
          "name": "Compliance",
          "route": "/compliance"
        },
        {
          "name": "Maintenance",
          "route": "/maintenance"
        },
                {
          "name": "Replenshments",
          "route": "/replenshments"
        },
                {
          "name": "Business",
          "route": "/business"
        }
      ]
    },
          {
          "name": "INCOMMING ALARMS",
          "route": "/",
          "valign": "top",
          "children": [
            {
              "name": "12:06 LOW PRODUCT-TANK 1",
              "route": "/product_tank1"
            },
            {
              "name": "14:07 CLEARED -LOW-TANK 1",
              "route": "/cleared_tank1"
            }
          ]
        },
    {
      "name": "CONTACT US",
      "route": "/contact_us",
      "valign": "bottom"
    }
  ]
}

menuItems

All menu item for nevigate around the site.

menuChildren

menu item for nevigate around the site.

Features

Display menu items in bootstrap style.
Display menu data dynamacally just pass the JSON Object in menu component.
Using Radium a React Component Styling Library for styling menu-component.
Runs in the browser and Node.js.
Built on standards.

Example

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Menu from './components/menu';

class App extends Component {
    constructor(props){
        super(props);
    }

    render() {
        let data ={
  "currentRoute": "/",
  "menuItems": [
    {
      "name": "MY SITES",
      "route": "/mysites",
      "valign": "top"
    },
        {
      "name": "CONNECTION STATUS",
      "route": "/connection_status",
      "valign": "top"
    },
    {
      "name": "WETSTOCK LIVE ANALYTICS",
      "route": "/wetstock_live",
      "valign": "top",
      "children": [
        {
          "name": "Compliance",
          "route": "/compliance"
        },
        {
          "name": "Maintenance",
          "route": "/maintenance"
        },
                {
          "name": "Replenshments",
          "route": "/replenshments"
        },
                {
          "name": "Business",
          "route": "/business"
        }
      ]
    },
          {
          "name": "INCOMMING ALARMS",
          "route": "/",
          "valign": "top",
          "children": [
            {
              "name": "12:06 LOW PRODUCT-TANK 1",
              "route": "/product_tank1"
            },
            {
              "name": "14:07 CLEARED -LOW-TANK 1",
              "route": "/cleared_tank1"
            }
          ]
        },
    {
      "name": "CONTACT US",
      "route": "/contact_us",
      "valign": "bottom"
    }
  ]
};
        return(
            <div>
      <Menu params={data}/>
            </div>
        );
    }
}

ReactDOM.render(<App />,document.querySelector('.container'));

Technology Stack:

react

Usage:

Clone the repo as a new project:

git clone https://github.com/lobdev/react-npm-menu <react-menu-component>

Start Server:

First you have to replace the lib/component/menu.js to index.js in package.json
cd react-npm-menu
npm i
npm start

Run App:

npm start command automatically initiate browser at 3000 port
http:://localhost:3000

Developer Notes:

Make sure you configure your editor/IDE to use:

.editorconfig
.eslintrc