Admin Template

Color Admin

“React 18 Version” Documentation by “Sean Ngu” v5.4.1

Updated on: 27/July/2024
By: Sean Ngu

If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help.

Thank you very much!

A) Installation - top

Follow the following step to install the reactjs in your localhost
You may refer to their official documentation for how to setup the node js & npm.
Setup Guide 

<!-- run the following command -->
cd /your-path-url/template_react
npm install
npm start

<!-- browse the url -->
http://localhost:3000/

Verify that you are running at least node 20.x.x or later and npm 10.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Copy over the required image from global assets folder

<!-- copy the following folder-->
/admin/template/assets/img
 
<!-- paste it into react folder -->
/admin/template/template_react/public/assets/img

B) File Structure - top

File structure overview for React JS Version

template_react/
├── package.json
├── README.md
├── public/
└── src/
    ├── app.jsx
    ├── index.js
    ├── index.css
    ├── assets/ 
    ├── components/
    ├── config/
    ├── pages/
    └── scss/

C) Page Structure - top

Below is the code from app.js which include the header, sidebar, right sidebar, top menu, page content and footer. You may remove the component if you are not using it.

import React, { useEffect, useState } from 'react';
import { AppSettings } from './config/app-settings.js';
import { slideToggle } from './composables/slideToggle.js';

import Header from './components/header/header.jsx';
import Sidebar from './components/sidebar/sidebar.jsx';
import SidebarRight from './components/sidebar-right/sidebar-right.jsx';
import TopMenu from './components/top-menu/top-menu.jsx';
import Content from './components/content/content.jsx';
import ThemePanel from './components/theme-panel/theme-panel.jsx';

function App() {  
  const [appTheme] = useState('');
  const [appDarkMode, setAppDarkMode] = useState(false);
  const [appGradientEnabled, setAppGradientEnabled] = useState(false);
  const [appHeaderNone, setAppHeaderNone] = useState(false);
  const [appHeaderFixed, setAppHeaderFixed] = useState(true);
  const [appHeaderInverse, setAppHeaderInverse] = useState(false);
  const [appHeaderMegaMenu, setAppHeaderMegaMenu] = useState(false);
  const [appHeaderLanguageBar, setAppHeaderLanguageBar] = useState(false);
  const [hasScroll, setHasScroll] = useState(false);
  const [appSidebarNone, setAppSidebarNone] = useState(false);
  const [appSidebarWide, setAppSidebarWide] = useState(false);
  const [appSidebarLight, setAppSidebarLight] = useState(false);
  const [appSidebarMinify, setAppSidebarMinify] = useState(false);
  const [appSidebarMobileToggled, setAppSidebarMobileToggled] = useState(false);
  const [appSidebarTransparent, setAppSidebarTransparent] = useState(false);
  const [appSidebarSearch, setAppSidebarSearch] = useState(false);
  const [appSidebarFixed, setAppSidebarFixed] = useState(true);
  const [appSidebarGrid, setAppSidebarGrid] = useState(false);
  const [appContentNone, setAppContentNone] = useState(false);
  const [appContentClass, setAppContentClass] = useState('');
  const [appContentFullHeight, setAppContentFullHeight] = useState(false);
  const [appTopMenu, setAppTopMenu] = useState(false);
  const [appTopMenuMobileToggled] = useState(false);
  const [appSidebarTwo, setAppSidebarTwo] = useState(false);
  const [appSidebarEnd, setAppSidebarEnd] = useState(false);
  const [appSidebarEndToggled, setAppSidebarEndToggled] = useState(false);
  const [appSidebarEndMobileToggled, setAppSidebarEndMobileToggled] = useState(false);
  
  ...
  
  return (
    <AppSettings.Provider
      value={{
        appTheme,
        appDarkMode,
        appGradientEnabled,
        appHeaderNone,
        appHeaderFixed,
        ...
      }}
    >
      <div
        className={
          'app ' +
          (appGradientEnabled ? 'app-gradient-enabled ' : '') +
          (appHeaderNone ? 'app-without-header ' : '') +
          (appHeaderFixed && !appHeaderNone ? 'app-header-fixed ' : '') +
          (appSidebarFixed ? 'app-sidebar-fixed ' : '') +
          (appSidebarNone ? 'app-without-sidebar ' : '') +
          (appSidebarEnd ? 'app-with-end-sidebar ' : '') +
          (appSidebarWide ? 'app-with-wide-sidebar ' : '') +
          (appSidebarMinify ? 'app-sidebar-minified ' : '') +
          (appSidebarMobileToggled ? 'app-sidebar-mobile-toggled ' : '') +
          (appTopMenu ? 'app-with-top-menu ' : '') +
          (appContentFullHeight ? 'app-content-full-height ' : '') +
          (appSidebarTwo ? 'app-with-two-sidebar ' : '') +
          (appSidebarEndToggled ? 'app-sidebar-end-toggled ' : '') +
          (appSidebarEndMobileToggled ? 'app-sidebar-end-mobile-toggled ' : '') +
          (hasScroll ? 'has-scroll ' : '')
        }
      >
        {!appHeaderNone && <Header />}
        {!appSidebarNone && <Sidebar />}
        {appSidebarTwo && <SidebarRight />}
        {appTopMenu && <TopMenu />}
        {!appContentNone && <Content />}
        <ThemePanel />
      </div>
    </AppSettings.Provider>
  );
}

export default App;

D) Components - top

List of components inside the components folder

components/
├── content/
├── float-sub-menu/
├── header/
├── panel/
├── sidebar/
├── sidebar-right/
├── theme-panel/
└── top-menu/

E) Config - top

File to configure the default page options & page routes

config/
├── app-route.jsx
└── app-settings.js

Example of how to change page options in single page

import React, { useEffect, useContext } from 'react';
import { AppSettings } from './../../config/app-settings.js';

function PageWithoutSidebar() {
  const context = useContext(AppSettings);

  useEffect(() => {
    context.handleSetAppSidebarNone(true);
    
    return () => {
      context.handleSetAppSidebarNone(false);
    };
    // eslint-disable-next-line
  }, []);

  return (
  );
}

export default PageWithoutSidebar;

List of options:

context.handleSetAppHeaderNone (true);
context.handleSetAppHeaderInverse (true);
context.handleSetAppHeaderLanguageBar(true);
context.handleSetAppHeaderMegaMenu(true);
context.handleSetAppHeaderFixed(true);

context.handleSetAppSidebarNone(true);
context.handleSetAppSidebarWide (true);
context.handleSetAppSidebarLight(true);
context.handleSetAppSidebarMinified(true);
context.handleSetAppSidebarTransparent(true);
context.handleSetAppSidebarSearch(true);
context.handleSetAppSidebarFixed(true);
context.handleSetAppSidebarGrid(true);
context.handleSetAppSidebarEnd(true);
context.handleSetAppSidebarTwo(true);

context.handleSetAppContentNone(true);
context.handleSetAppContentClass('p-0');
context.handleSetAppContentFullHeight(true);

context.handleSetAppTopMenu(true);
context.handleSetAppBoxedLayout(true);
context.handleSetAppDarkMode('dark');
context.handleSetAppGradientEnabled(true);
context.handleSetAppTheme('blue');

context.toggleAppSidebarMinify();
context.toggleAppSidebarMobile();
context.toggleAppTopMenuMobile();
context.toggleAppSidebarEnd();
context.toggleAppSidebarEndMobile();

F) Dark Mode - top

Enable dark mode from template_react/src/app.jsx.

...
const [appDarkMode, setAppDarkMode] = useState(true);   // LINE 14
...

G) Switch Design - top

Apple Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'apple/styles';
  2. Add the following css link to template_react/public/index.html.
    <link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
  3. Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
    <div class="menu-icon">
  <i class="ion-ios-pulse bg-gradient-blue"></i>
</div>

Facebook Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'facebook/styles';
  2. Change the following variable from template_react/src/app.jsx.
    ...
const [appHeaderInverse, setAppHeaderInverse] = useState(true);   // LINE 18
...

Transparent Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'transparent/styles';
  2. Add the .app-cover next to the <body> tag in template_react/public/index.html.
    <body>
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  
  ...
</body>

Google Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'google/styles';
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Change the following variable from template_react/src/app.jsx.
    ...
const [appSidebarWide, setAppSidebarWide] = useState(true);    // LINE 23
const [appSidebarLight, setAppSidebarLight] = useState(true);  // LINE 24
...
  4. Add the navbar desktop toggler to the .app-header in template_react/src/components/header.jsx.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler">
      ...
    </button>
    <a class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'material/styles';
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Change the following variable from template_react/src/app.jsx.
    ...
const [appSidebarWide, setAppSidebarWide] = useState(true);    // LINE 23
...
  4. Add the navbar desktop toggler to the .app-header in template_react/src/components/header.jsx.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler">
      ...
    </button>
    <a class="navbar-brand">
      Color Admin Material
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>
  5. Add the floating navbar form to the .app-header in template_react/src/components/header.jsx AND REMOVE the default .navbar-form.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item">
      <a href="#" class="navbar-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- REMOVE IT -->
      <div class="navbar-item navbar-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="navbar-floating-form">
    <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
    <input type="text" class="form-control" placeholder="Search Something..." />
    <a href="#" class="close">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>
  6. Change the .app-loader in template_react/public/index.html.
    <!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <div class="material-loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div class="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->

H) Using SCSS - top

Now Vue.js version is fully scss configured. You may switch the Color Admin theme by changing the file /template_react/src/scss/react.scss.

@import 'default/styles';
 
<!-- other themes -->
@import 'apple/styles';
@import 'facebook/styles';
@import 'google/styles';
@import 'material/styles';
@import 'transparent/styles';

I) NPM Package - top

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. https://www.npmjs.com/package/reactstrap 

{
  "name": "color-admin",
  "version": "5.4.1",
  "private": true,
  "dependencies": {
    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
    "@fortawesome/fontawesome-free": "^6.6.0",
    "@fullcalendar/bootstrap": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/list": "^6.1.15",
    "@fullcalendar/react": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "@react-google-maps/api": "^2.19.3",
    "apexcharts": "3.51",
    "bootstrap": "^5.3.3",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^4.4.3",
    "codemirror": "^6.0.1",
    "flag-icons": "^7.2.3",
    "jsvectormap": "^1.6.0",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "node-sass": "^9.0.0",
    "photoswipe": "^5.4.4",
    "react": "^18.3.1",
    "react-apexcharts": "^1.4.1",
    "react-bootstrap-daterangepicker": "^8.0.0",
    "react-calendar": "^5.0.0",
    "react-color": "^2.19.3",
    "react-countdown": "^2.3.5",
    "react-data-table-component": "^7.6.2",
    "react-datepicker": "^7.3.0",
    "react-datetime": "^3.2.0",
    "react-dom": "^18.3.1",
    "react-highlight": "^0.15.0",
    "react-input-mask": "^2.0.4",
    "react-notifications-component": "^4.0.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.25.1",
    "react-scripts": "^5.0.1",
    "react-select": "^5.8.0",
    "react-tag-autocomplete": "^7.3.0",
    "simple-line-icons": "^2.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@iconify/react": "^5.0.1"
  }
}