ReactJS Dymanic Menu And Custom Theme Using Material UI

Introduction

 

In this article, we will learn how to create a dynamic menu & custom theme in React material UI in React applications. When I want to develop a professional website using react I come across this material UI and a few relevant useful information which will drive me to implement this dynamic menu & custom theme. This is easier to maintain code and reuse with minimal effort.

 

Prerequisites

• Basic Knowledge of React
• Visual Studio Code
• Node and NPM installed
• Material UI Installed

Create ReactJS project

 

Let's first create a React application using the following command.

 

npx create-react-app reactdevelopment

Install Material-UI

 

Material UI is a component library for React teeming with powerful components that you should be using in your projects. If you're just looking to create a good-looking app, Material UI can provide you with solid pre-styled components that will get the job done.

 

Now Install Material-UI by using the following command.

 

npm install @material-ui/core --save

npm install @material-ui/icons --save

 

Now install react-router dom for navigation

 

Install React-Router-DOM

 

Now install react-router dom for navigation

 

npm install react-router-dom --save

 

I am assuming that you are aware of the react-router. Hence I am not explaining about React – Router -Dom

 

Cleanup Initial Code Base

 

Before we start writing our code, we will remove code that was preinstalled with react application. That code/files no need while developing a fresh empty project.

 

Remove below files,

• App.test.js
• Icon files.
• App.css

Remove content in manifest.json which having reference to icons

 

Create Custom Theme

 

In this project, I have created a theme that will apply all the files from the center place. To avoid confusion I will explain how the theme is used.

 

ThemeProvider – used to apply the theme for the entire application .to use theme pls install'@material-ui/styles'

 

Create theme.js file and mention your custom inline CSS. By default, the theme is derived from material UI core CSS. We can customize the core CSS and override it.

 

Consider material UI has primary color. We can override the primary color by using this theme.

 

To implement the theme please import makeStyles, ThemeProvider, createMuiTheme

 

from @material-ui/core/styles

 

Consider the below example I have overridden the theme as given below.

const reactBlue = "#0B72B9";
const reactOrange = "#FFBA60";
export default createMuiTheme({
palette: {
  common: {
            blue: `${reactBlue}`,
            orange: `${reactOrange}`,
        },
primary: {
         main: `${reactBlue}`
     }

Primary

 

I set it as blue in color. Hence the wherever I used primary color class, this blue color will override

 

Typography

 

Typography is a Material-UI component used to standardize the text and its related CSS properties without worrying about browser compatibility issues.

 

Example

 

<Typography variant="h1"> h1 - Heading Variant </Typography>

 

Importing Typography

 

You can import <Typography /> component from @material-ui/core using the following code.

import { Typography } from '@material-ui/core'
// OR
import Typography from '@material-ui/core/Typography'

Then create Header.js as per the code attached.

 

We are going to implement the dynamic menu in this file only below are the steps involved to create a menu item.

1. First, create App Bar & Toolbar.
2. Next step to create a TAB inside Toolbar that looks like a master menu,
3. Then create Menu & Menu items.
4. Link that menu items to TAB.
5. Configure Route for each menu items. have pasted the entire Header.js file code here .. then I will explain the main topic which needs to aware

• useState - Maintain the State of current component values and store & retrieve data.
• Use Effect- Occurs when component loaded completely
• useScrollTrigger – App bar to make fix when scrollable content present in entire screen

Below line of code is just copy paste from material UI-so no need to review.this code is already do all the functionality related to app bar

function ElevationScroll(props) {
    const {
        children,
        window
    } = props;
    // Note that you normally won't need to set the window ref as useScrollTrigger
    // will default to window.
    // This is only being set here because the demo is in an iframe.
    const trigger = useScrollTrigger({
        disableHysteresis: true,
        threshold: 0,
        target: window ? window() : undefined,
    });
    return React.cloneElement(children, {
        elevation: trigger ? 4 : 0,
    });
}
ElevationScroll.propTypes = {
    children: PropTypes.element.isRequired,
    window: PropTypes.func,
};

In our main topic code I have created one array object and created the menu items,

const menuOptions = [{
    name: "Services",
    link: "/services"
}, {
    name: "Custom Software Development",
    link: "/customsoftware"
}, {
    name: "Mobile Application Development",
    link: "/mobileapps"
}, {
    name: "Website Development",
    link: "/websites"
}, ];

Below code will open and close the popup menu items under services master menu

const handleMenuItemClick = (e, i) => {
setanchrEl(null);
setOpen(false);
setselectedIndex(i); }
const handleClose = (e) => {

I am looping the array and created menu items dynamically and run time I assign the route value.

 

Run the project and check the result.

 

Using npm start.

 

You may get a different color of the app bar since I am customizing the appbar. Hence its showing blue color. I am attaching my code so you can refer to and fix it if any issue occurs.

 

Output

 

 

Summary

 

In this article, we learned how we implement dynamic menu & custom theme in React applications using React material UI.