react-menu-component

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