How to Remove Loader from Application?

• Go to app.jsx file in src >> components >> common >> loader.js

• Remove design of loader from src >> components >> common >> loader.js between comment of Loader starts to Loader ends

                                  
  <!-- Loader starts -->
    <div className={`loader-wrapper ${show ? '' : 'loderhide'}`}>
      <div className="loader bg-white">
        <div className="whirly-loader"></div>
      </div>
    </div>
                                  
                                

• correspondingly remove methods of useEffect from script tag in loader.js

  
  const [show, setShow] = useState(true);
    useEffect(() => {
      setTimeout(() => {
        setShow(false)
      }, 1000);
    },[show]);
                                  
                                

Routing

Your complete route structure is place at index.js

Suppose you are creating a new component (For creating a new component refer create new component ) then you have to add new routes for that components.

• Import that component in index.js

  
  /* Dashboards */
  import Default from './components/dashboard/defaultCompo/default';
  import Ecommerce from './components/dashboard/ecommerce';
  import University from './components/dashboard/university';
  import Crypto from './components/dashboard/crypto/crypto-component';
  import ServerComponent from './components/dashboard/server/server-component';
  import Project from './components/dashboard/project/project';
                                              
                                    
                                

• Use that component name with path in routes array in index.js

  %process.env.PUBLIC_URL% :- When you run npm run build, Create React App will substitute %PUBLIC_URL% with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL.

  
  <Route exact path={`${process.env.PUBLIC_URL}/`} component={Default} />
  <Routeexactpath={`${process.env.PUBLIC_URL}/dashboard/default`}component={Default}/>
  <Routepath={`${process.env.PUBLIC_URL}/dashboard/ecommerce`}component={Ecommerce}/>
  <Routepath={`${process.env.PUBLIC_URL}/dashboard/university`}component={University}/>
  <Routepath={`${process.env.PUBLIC_URL}/dashboard/crypto`}component={Crypto}/>
  <Routepath={`${process.env.PUBLIC_URL}/dashboard/server`}component={ServerComponent}/>
  <Routepath={`${process.env.PUBLIC_URL}/dashboard/project`}component={Project}/>        
                                
                              

Customize or Replace Menu Sidebar

Suppose you want to change in your menu sidebar or want to add new menu in your menu section then you just need to open constant >> menu.js and

{
  title: 'Dashboard', icon: Home, type: 'sub', badgeType: 'primary', active: false, children: [
      { path: '/dashboard/default', title: 'Default', type: 'link' },
      { path: '/dashboard/ecommerce', title: 'E-Commerce', type: 'link' },
      { path: '/dashboard/university', title: 'University', type: 'link' },
      { path: '/dashboard/crypto', title: 'Crypto', type: 'link' },
      { path: '/dashboard/server', title: 'Server', type: 'link' },
      { path: '/dashboard/project', title: 'Project', type: 'link' }
  ]
},
                        

Variables :

Path : Here you have to give path name same as you have given in index.js

title : Title is the name that you can see on frontside so here you can give attractive title to showcase your menu item

type : It denote how you want to open your particular routes means on same page, or on new page on live application. Means suppose you want to open "ecommerce" dashboard on new page then write "extTabLink" in type attribute. Here we have four type attribute:

• link : It simply link with particular routes without loading your page.
• sub : It stop to route your page to next. In most case it use when our menu have children item.
• extLink : It change route with reloading a page (Work like href)
• extTabLink : It change routes and taking us on new tab.

Now, Suppose you want to add New Menu in your menu.js then you just need to add it in same way like if it has no any child then no need to give children attribute and if your menu item have sub menu then you can add children attribute accordingly in your menu.js. For more refer constant >> menu.js.

Add Components

React provide two types Components :-

• - Class Components
• - Functional Components (Hooks)

Class Components

Suppose if you want to create a new class component then you just need to create a folder in src >> pages and then create a react file with .js extension and then paste code as per your needs.

import React, { Component } from 'react';

class Demo extends Component {
    render() {
        return (
            <div>
                //write Html code or structure
            </div>
        );
    }
}

export default Demo;
                        

Functional Component : (Hooks)

Suppose if you want to create a new class component then you just need to create a folder in src >> pages and then create a react file with .js extension and then paste code as per your needs.

import React from 'react';
const Demo = () => {
  return (
      <div>
        //write Html code or structure
      ></div>
    );
  };

export default Demo;
                          

Use of Widgets

Suppose you want to use widget then you need to integrate a particular widget in your existing file. Suppose you want to use calneder components in your dashboard then you need to import that widget in your dashboard

import React, { Component } from 'react';
import Datepicker from './datepicker';  //import external dependacy

class Demo extends Component {
    render() {
        return (
            <Datepicker> 
                //declare like this here
            </Datepicker>
        );
    }
}

export default Demo;
                          

Style customization

Suppose you want to customize color and font as per your project then you can change it by:

• Theme Color

  Suppose you want to customize your theme primary and secondary color:

  
    @import "theme/variables";
    $primary-color: #0288d1;
    $secondary-color :#26c6da; 
          

  Then you have to create in assets >> scss >> theme >> _color-1.scss and then place your theme primary color in $primary-color and your secondary color in $secondary-color and then create color-1.scss import all scss in your color-1.scss.

• Variable customization of complete theme

  Suppose you want to change color and size of card-body, Alert, Badge, Form input, breadcrumb,buttons, footer, sidebar and many more then you just need to change that particular color from _variable.scss in assets >> scss >> theme >> _variable.scss

• Google Font

  You can change font of your theme from index.html

  
  <link rel="icon" href="<%= BASE_URL %>favicon.png">
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  

Theme Customize

Layouts

We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to body!

For creating your dream layout open customizer by click on setting icon

You can change your theme by clicking particular setting

Then you just need to click on configuration button

Configuration popup will be open then just click on copy json button which will copy configuration of theme which you want

Now go to our theme >> src >> data >> customizer >> config.js and then just replace complete config.js with your new configuration and re-run theme using npm start.

{ "settings":
  {
    "layout_type":"ltr",
    "sidebar":{
      "type":"default",
      "body_type":"default"
    },
    "sidebar_setting":"default-sidebar",
    "sidebar_backround":"dark-sidebar"
  },
  "color":
    {
      "layout_version":"light",
      "color":"color-1",
      "primary_color":"#4466f2",
      "secondary_color":"#1ea6ec",
      "mix_layout":"default"
    },
  "router_animation":"fade"
}
      

Please refer the below table for corresponding classes. it is just for your inforamation you do not need to bother about this it's dynamically take particular classes according to your needs.

Theme options

We have some inbuilt themes for sidebar that can be switched with just a class change

RTL

Suppose you want to add RTL in your application then you just need to set "layout_type" as RTL so application will be converted in RTL layout.

Suppose you want to change Colors from config.js then you have to first clear localStorage then you will get your color in theme.

{ "settings":
  {
    "layout_type":"rtl",
    "sidebar":{
      "type":"default",
      "body_type":"default"
    },
    "sidebar_setting":"default-sidebar",
    "sidebar_backround":"dark-sidebar"
  },
  "color":
    {
      "layout_version":"light",
      "color":"color-1",
      "primary_color":"#4466f2",
      "secondary_color":"#1ea6ec",
      "mix_layout":"default"
    },
  "router_animation":"fade"
}
                              

                                
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
                                
                              

                                
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>                       
                      
                          

                                
<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>

    <div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>

      <div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>

    <div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>

  <div class="progress">

<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>
                            

                                
<div class="alert alert-primary dark" role="alert">This is a info alert—check it out!</div>

  <div class="alert alert-secondary dark" role="alert">This is a light alert—check it out!</div>

    <div class="alert alert-success dark" role="alert">This is a success alert—check it out!</div>

      <div class="alert alert-info dark" role="alert">This is a danger alert—check it out!</div>

      <div class="alert alert-warning dark" role="alert">This is a secondary alert—check it out!</div>

    <div class="alert alert-danger dark" role="alert">This is a warning alert—check it out!</div>

  <div class="alert alert-light dark" role="alert">This is a dark alert—check it out!</div>

<div class="alert alert-dark dark" role="alert">This is a dark alert—check it out!</div>
                            

                                

import { Popover, PopoverHeader, PopoverBody} from 'reactstrap';
const Example = () => {
  const [popoverOpen, setPopoverOpen] = useState(false);
  const Toggle = () => {
    setPopoverOpen(!popoverOpen)
  } 
  return(
  <button id="Popover1" type="button" className="btn btn-primary">
    Click to toggle popover
  </button>
  <Popover placement="top" isOpen={popoverOpen} target="Popover1" toggle={Toggle}>
    <PopoverHeader>Popover Title</PopoverHeader>
    <PopoverBody>And here's some amazing content. It's very engaging. Right?</PopoverBody>
  </Popover>
  )
}
                                
                              

• Tooltip
• Dropdown
• Tabs
• According
• Box shadow

                                
<UncontrolledTooltip placement="right" target="UncontrolledTooltipExample">
          Hello world!
</UncontrolledTooltip>
                                
                          

                                
const DropdownComponent = () => {

  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggle = () => setDropdownOpen(!dropdownOpen);

  return(
  <Dropdown isOpen={dropdownOpen} toggle={toggle}>
    <DropdownToggle caret color="primary">
      Dropdown
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem header>Header</DropdownItem>
      <DropdownItem>Some Action</DropdownItem>
      <DropdownItem disabled>Action (disabled)</DropdownItem>
      <DropdownItem divider />
      <DropdownItem>Bar Action</DropdownItem>
    </DropdownMenu>
  </Dropdown>
  )
}
                                
                                  

                                
import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
const TabsSet = () => {
  const [activeTab, setActiveTab] = useState('1');
  return(
    <Nav tabs className="border-tab-primary">
        <NavItem className="nav nav-tabs" id="myTab" role="tablist">
            <NavLink className={activeTab === '1' ? 'active' : ''} onClick={() => setActiveTab('1')}>
                Home
            </NavLink>
        </NavItem>
        <NavItem className="nav nav-tabs" id="myTab" role="tablist">
            <NavLink className={activeTab === '2' ? 'active' : ''} onClick={() => setActiveTab('2')}>
                Profile
            </NavLink>
        </NavItem>
        <NavItem className="nav nav-tabs" id="myTab" role="tablist">
            <NavLink className={activeTab === '3' ? 'active' : ''} onClick={() => setActiveTab('3')}>
                Contact
            </NavLink>
        </NavItem>
    </Nav>
    <TabContent activeTab={activeTab}>
        <TabPane tabId="1">
            <p className="mb-0 m-t-30">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
        </TabPane>
        <TabPane tabId="2">
            <p className="mb-0 m-t-30">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
        </TabPane>
        <TabPane tabId="3">
            <p className="mb-0 m-t-30">Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
        </TabPane>
    </TabContent>
  )
}
 
                                
                                

                              npm i react-light-accordion
                            

                                
import { Accordion, AccordionItem } from 'react-light-accordion';
import 'react-light-accordion/demo/css/index.css';

const AccordionComponent = () => {
  const DummyContent1 = () => (
    <div className="collapse show" id="collapseicon" aria-labelledby="collapseicon" data-parent="#accordionoc">
      <div className="card">
        <p>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </p>
      </div>
    </div>
  );
  const DummyContent2 = () => (
    <div className="collapse show" id="collapseicon1" aria-labelledby="collapseicon1" data-parent="#accordionoc">
      <p>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      </p>
    </div>
  );
  const DummyContent3 = () => (
    <div className="collapse show" id="collapseicon2" data-parent="#accordionoc">
      <p>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      </p>
    </div>
  );
  return (
     <div>
       <div className="card">
         <Accordion atomic={true}>
           <AccordionItem className="card-header bg-primary" title="Collapsible Group Item #1">
             <DummyContent1 />
           </AccordionItem>
           <AccordionItem className="card-header bg-primary" title="Collapsible Group Item #2">
             <DummyContent2 />
           </AccordionItem>
           <AccordionItem className="card-header bg-primary" title="Collapsible Group Item #3">
             <DummyContent3 />
           </AccordionItem>
         </Accordion>
       </div>

     </div>
  );

}

                                
                                  

                                  
<h6 class="sub-title mb-5 mt-5">Regular shadow</h6>

<div class="shadow-lg p-25 shadow-showcase text-center">

  <h6 class="m-0 f-18">Larger shadow</h5>

</div>

<h6 class="sub-title mb-5 mt-5">Regular shadow</h6>

<div class="shadow shadow-showcase p-25 text-center">

  <h6 class="m-0 f-18">Regular shadow</h5>

</div>

<h6 class="sub-title mb-5 mt-5">small shadow</h6>

<div class="shadow-sm shadow-showcase p-25 text-center mb-5">

  <h6 class="m-0 f-18">Small shadow</h5>

</div>
                                  
                                

Apps

E-commerce

You can directly use complete E-commerce app to manage your E-commerce with readymade functionality of Add to cart,Quickview, and Checkout. Apart from that if you want it to use it in your frontend application then you just need to change your json with your API data and you get complete workable E-commerce for your frontend.

Chat

In Chat application we provide complete chat designing with basic feature like chat with a people.

Gallery

Supplemental

Present your amazing ideas and images using our smooth and attractive gallery

To-D0

Now it's time to Decrease your burden by listing your daily task in our To-do app and feel relax.

To-D0 with Firebase

Now it's time to Decrease your burden by listing your important task in our To-do app and feel relax.

Email

Use our Email application design to build complete email app

Bookmark

You can Bookmark your Favioute application and pages using bookmark app so you can reach to your favioute app quickly.

                                    npm i react-big-calendar
                            

                                
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
  
const localizer = momentLocalizer(moment)
  
const MyCalendar = props => (
  <div>
    <Calendar
        localizer={localizer}
        events={myEventsList}
        startAccessor="start"
        endAccessor="end"
        style={{height: 500}}
    />
  </div>
)
                                
                              

Firebase

Basically Firebase use for:

• Email and password authentication with Firebase,
• Social authentication with Facebook and Google, Twitter etc..
• Manage Complete Database on Cloud
• Hosting
• Password recovery,
• Verification emails,
• Storing and accessing the authentication state using the browser's localStorage

There are also many other use of firebase that you can find from reference which we have attach below.

Prerequisites

You must have the following prerequisites:

• Recent versions of Node.js and NPM. You can install them from their official website,
• React Cli installed (npm install -g create-react-app)

Let's follow below step to secure your application

Firebase Authentication only

• If you want to login only with firebase then you just need to follow below step.

  1 . Just un-comment below commented code from src -> index.js

  

• 2 . Do comment un-commented function. And uncommnet comment function. For more read comment described in src -> auth -> signin.js.

  

How to remove the firebase from endless theme

• For Totally remove firebase from theme then check this video.

Thank You

• Answering your questions, problems regarding theme with best to solving before 24 working hours,once you generate a ticket.
• Solution of Reported Bug
• Update you with latest version of theme

Apart from that, if you needs any extra / customization work then also you can get in touch with our experts by raising ticket to help you in customize with affordable extra budget.

Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

Best Regards

Pixelstrap