Introduction

Cuba React Admin Theme is pure React theme, Yes! you read correct, it's No Jquery React admin theme including all feature and functionality with ease of integration for your project.Cuba theme document will help you to understand React from scratch to making perfect real time dream application.

We also includes React Hooks and Redux which is manage applications data in easy way. It's user freindlly to learn the application.

Follow the documentation carefully for solving your issues in minutes, Apart from that if you don't find solution when you following the docs you can raise a support ticket for your issue from pixelstrap.freshdesk.com

Dependancies
  • React
  • Reactstrap
  • React Hook
  • SASS

Yes! again No Jquery dependency.

Features

  • ReactJS, No Jquery Dependency
  • Created with React CLI 16.10.2
  • 2 Attractive Dashboard
  • Attractive Charts using Apex Charts, Google Charts, Knob, ChartJS, Chartist
  • Map using Google map and Leaflet
  • Editor
  • Knowledge Base
  • Job Search
  • 11 Workable Application
    • E-commerce App
    • Chat Application
    • Bookmark Application
    • Task Application
    • To-do
    • Firebase To-do
    • Search Bookmark
    • Email
    • Calender
    • Firebase Contact
    • Attractive Gallery
  • Drag and Drop
  • Sidebar variation (compact, horizontal, close_icon)
  • Color Variation (Light and Dark Layout)
  • RTL and Box Support
  • Error pages

Getting started

Welcome to React! React helps you build modern applications for the web, mobile, or desktop.

For getting started an React application you needs two things as Prerequisites.

Prerequisites

Before you begin, make sure your development environment includes Node and an npm package manager.

Node.js

Download latest version of node.js from nodejs.org.

  • Install Node.js using downloaded file
  • To check your node version, run node -v in a terminal/console window.
Npm package manager

React CLI, and React apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager. This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.

For better understanding Vue we suggest you to once go through official documentation of Vue from ReactJS.org

React setup

If you want Cuba theme setup then directly follow next Cuba setup section

Installing React CLI

You use the React CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks as it is a progressive framework for building user interfaces.

Install the React CLI globally.

To install the CLI using npm, open a terminal/console window and enter the following command:

npm install -g create-react-app 
Create Initial application
  • 1 . Run the CLI command react create and provide the name my-app, as shown here:
npm create-react-app my-app
  • 2. The react create command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.
Run Application
  • 1. Go to the workspace folder (my-app).
cd my-app
  • 2. Launch the server by using the CLI command npm start
npm start
Supplemental

Cuba setup

If you have already download and install node.js and React CLI then ignore prerequisites accordingly.

Prerequisites
Node.js

Download latest version of node.js from nodejs.org.

  • Install Node.js using downloaded file
  • To check your node version, run node -v in a terminal/console window.
React CLI

Install React CLI Using:

npm install -g create-react-app
Setup Cuba theme by
  • 1) Download and extract an Cuba themes from themeforest
  • 2) Extract it and then go in to theme folder.
cd  theme
  • 3) Import all dependency by installing npm command
npm install
  • 4) Now you are in stage to successfully run Cuba using below command:
npm start

Once you serve your application by default it will take their defalult port so you can open port using localhost://3000

Make sure you are not running any other react project in local if so then use new generated port from terminal with label called app running at:

Some Common solution if you do not run project successfully
  • Use Latest Version of node.js
  • Remove node_module and package-lock.json file and again do npm install
  • You can again download theme from themeforst and then again run
  • Then also if you don't solve issue you can generate a ticket.
Build Application
  • 1. Build you application for host on server using below command:
npm run build
  • 2. It will create one dist file in your theme folder. Make zip of dist folder. so here you are ready to upload your theme on server.
  • If you’re using Apache HTTP Server, you need to create a .htaccess file in the public folder by pastng below code

  Options -MultiViews
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^ index.html [QSA,L]
                              
  • Now upload your dist folder on public folder
Supplemental

Folder Structured

Here we represent View Folder Structure and Style Customize

  • Cuba Admin
    • node_modules # All your dependencies you can find here
    • public # your Index.html file is here
    • src # Flow of complete project and all components you can find it from here
      • components # A common components of complete project place here
        • app.jsx # Root File of your project
        • other-folders # All dashboard and widget you can refer from here
          • allFiles.jsx
      • assets # Assets of your complete project place here
        • Fonts
        • Images
        • Css
        • Scss
        • Video
      • data # All Json or Js file place here
        • product.json
      • layout #Your common component you can find from here
        • allFile.jsx
      • store # Centralize store for Maintain Reducers
        • index.jsx
      • redux # Centralize store for Reducers
        • actionType.jsx
        • index.jsx
      • services # Centralize services provide for Reducers
        • contact.service.jsx
      • index.jsx #Root File of your project
      • index.scss #Root design structure File of your project
    • .env #Create for Firebase environment
    • package.json

How to Remove Loader from Application?

  • Go to app.jsx file and comment or remove Loader section
  • Remove design of loader from src >> layout >> loader >> index.jsx between comment of Loader starts to Loader ends

                                    
    <!-- Loader starts -->
    <div className={`loader-wrapper ${show ? '' : 'loderhide'}`}>
      <div className="loader-index"><span></span></div>
      <svg>
          <defs></defs>
          <filter id="goo">
          <fegaussianblur in="SourceGraphic" stdDeviation="11" result="blur"></fegaussianblur>
          <fecolormatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo">    </fecolormatrix>
          </filter>
      </svg>
    </div>
                                    
                                  
  • correspondingly remove methods of useEffect from script tag in loader.jsx

    
    const [show, setShow] = useState(true);
    useEffect(() => {
        const timeout = setTimeout(() => {
            setShow(false)
          }, 3000);
    
        return () => {
            clearTimeout(timeout);
          }
        
    },[show]);
                                    
                                  

Routing

Your complete route structure is place at index.jsx

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.jsx

    
    
    /* Dashboards */
    import Default from './components/dashboard/default'
    import Ecommerce from './components/dashboard/ecommerce'
    
                                                
                                      
                                  
  • Use that component name with path in routes array in index.jsx

    %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} />
      <Route path={`${process.env.PUBLIC_URL}/dashboard/default`} component={Default}/>
      <Route path={`${process.env.PUBLIC_URL}/dashboard/ecommerce`} component={Ecommerce}/> 
            
                                    
                                  

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 src >> layout >> sidebar >> menu.jsx and


{
    title: 'Dashboard', icon: Home, type: 'sub', active: false, children: [
        { path: `${process.env.PUBLIC_URL}/dashboard/default`, title: 'Default', type: 'link' },
        { path: `${process.env.PUBLIC_URL}/dashboard/ecommerce`, title: 'Ecommerce', type: 'link' },
    ]
},
                        
Variables :

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

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.jsx 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.jsx. For more refer src >> layout >> sidebar >> menu.jsx.

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 .jsx 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 .jsx 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 then go to assets >> scss >> color.scss and give primary and secondary color as per your choice :

    
      $primary-color: #7366ff;
      $secondary-color: #f73164; 
            

    And if you want to convert default color to your require color then go to assets >> scss >> theme >> _variable.scss and change primary and secondary color from there

    For changing charts color you need to go in src >> layout >> theme-customizer >> index.jsx and find color data and change your color their also

  • 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 in public folder

    
    <link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&display=swap">
    
    

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

img1

You can change your theme by clicking particular setting

img1

Then you just need to click on configuration button

img3

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

img3

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



{
  "settings": {
    "layout_type": "ltr",
    "sidebar": {
     "type": "compact-wrapper",
     "body_type": "sidebar-icon"
     },
     "sidebar_setting": "default-sidebar",
     "sidebar_background_setting": ""
   },
   "color": {
       "layout_version": "light", 
       "color": "color-1", 
       "primary_color": "#7366ff", 
       "secondary_color": "#f73164", 
       "mix_background_layout": "light-only",  
     },
    "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.

Layout Options
RTL Layout Attribute:
main-theme-layout="rtl"
Light layout class:
light-only
Dark Page-body class:
dark-body-only
Dark Siderbar and Page-body class:
dark-sidebar-body-mix
Dark Header and Siderbar class:
dark-header-sidebar-mix
Dark Layout class:
dark-only
Theme options

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

Sidebar Options
Horizontal Sidebar type class:
"page-wrapper horizontal-wrapper" and "page-body-wrapper horizontal-menu"
Default Sidebar layout Attribute:
sidebar-layout="default-sidebar"
Bordered Navigation Attribute:
sidebar-layout="border-sidebar"
Sidebar icons color Attribute:
sidebar-layout="iconcolor-sidebar"
Sidebar Background Image class:
sidebar-img*
Router Animation Options
Select Animation type Zoom Fade, Slide Fade, Fade Bottom, Fade, Zoom Out, None

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.jsx then you have to first clear localStorage then you will get your color in theme.


{
  "settings": {
    "layout_type": "rtl",
    "sidebar": {
      "type": "compact-wrapper",
      "body_type": "sidebar-icon"
      },
      "sidebar_setting": "default-sidebar",
      "sidebar_background_setting": ""
    },
    "color": {
        "layout_version": "light", 
        "color": "color-1", 
        "primary_color": "#7366ff", 
        "secondary_color": "#f73164", 
        "mix_background_layout": "light-only",  
      },
    "router_animation": "fade"
  }
}
                              
Basic UI Elements
                                  
import {Button} from 'reactstrap'

<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="info">Info</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>
                                  
                            
Primary Secondary Success Info Warning Danger Light Dark
                                
import { Badge } from 'reactstrap';

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

                      
                          
                                
import {Progress} from 'reactstrap'

<Progress value="0"/>
<Progress color="primary" value="25"/>
<Progress color="secondary" value="50"/>
<Progress color="success" value="75"/>
<Progress color="info" value="100"/>
                                
                            
                                
import {Alert} from 'reactstrap'

<Alert color="primary dark">This is a info alert—check it out!</Alert>
<Alert color="secondary dark">This is a light alert—check it out!</Alert>
<Alert color="success dark">This is a success alert—check it out!</Alert>
<Alert color="info dark">This is a danger alert—check it out!</Alert>
<Alert color="warning dark">This is a secondary alert—check it out!</Alert>
<Alert color="danger dark">This is a warning alert—check it out!</Alert>
<Alert color="light dark">This is a dark alert—check it out!</Alert>
<Alert color="dark dark">This is a dark alert—check it out!</Alert>
                              
                            
Dismissible popover
                                
import {popover,popoverHeader,popoverBody} from 'reactstrap'

const example = () => {
  const [popoverOpen, setPopoverOpen] = useState(false)
  const toggle = () => setPopover(!popover);
  return(
    <popover placement="bottom" isOpen={popoverOpen} toggle={toggle} target="Popover1">
      <popoverHeader>Popover Title</popoverHeader>
      <popoverBody>And here's some amazing content. It's very engaging. Right?</popoverBody>
    </popover>
  )
}
                                
                              
                                
import {Tooltip} from 'reactstrap'

const Tooltips = (props) => {
  const [basictooltip, setbasictooltip] = useState(false);
  const toggle = () => setbasictooltip(!basictooltip);
  return(
          <Button color="primary" id="TooltipExample">Hover Me </Button>
          <Tooltip 
            placement="top" 
            isOpen={basictooltip} 
            target="TooltipExample" 
            toggle={toggle}>
            Popover title
          </Tooltip>
      )
  } 
                
                                
                          

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

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

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

                                
const TabsExample = (props) => {

  const [BasicTab, setBasicTab] = useState('1');
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggle = () => setDropdownOpen(prevState => !prevState);
  
  return(
  <CardBody>
      <Nav tabs>
        <NavItem>
            <NavLink href="#javascript"  className={BasicTab === '1' ? 'active' : ''} onClick={() => setBasicTab('1')}>Home</NavLink>
        </NavItem>
        <Dropdown className="nav-item" isOpen={dropdownOpen} toggle={toggle}>
          <NavItem>
          <DropdownToggle className="nav-link" tag="a" href="#javascript"  color="default" caret>
            Dropdown
          </DropdownToggle>
          <DropdownMenu>
              <NavLink href="#javascript" className={BasicTab === '2' ? 'active' : ''} onClick={() => setBasicTab('2')}>Action</NavLink>
              <DropdownItem href="#javascript" >Another action</DropdownItem>
              <DropdownItem href="#javascript">Something else here</DropdownItem>
              <DropdownItem divider/>
              <DropdownItem href="#javascript">Separated link</DropdownItem>
          </DropdownMenu>
          </NavItem>
        </Dropdown>
        <NavItem>
          <NavLink href="#javascript" className={BasicTab === '3' ? 'active' : ''} onClick={() => setBasicTab('3')}>Profile</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#javascript" className={BasicTab === '4' ? 'active' : ''} onClick={() => setBasicTab('4')}>Contact</NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={BasicTab}>
        <TabPane  className="fade show" 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 111 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="3">
        <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="4">
        <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>
      </TabContent> 
  </CardBody> 
  )
}
                                  
                                
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.
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.
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 aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                              npm i react-bootstrap
                            
                                
import {Accordion} from 'react-bootstrap'

<Accordion defaultActiveKey="0">

  <Accordion.Toggle  className="btn btn-link" color="default" eventKey="0">
      Collapsible Group Item #<span className="digits">1</span>  
  </Accordion.Toggle>
  <Accordion.Collapse eventKey="0">
        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.
  </Accordion.Collapse>

  <Accordion.Toggle  className="btn btn-link" color="default" eventKey="1">
      Collapsible Group Item #<span className="digits">2</span>  
  </Accordion.Toggle>
  <Accordion.Collapse eventKey="1">
        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.
  </Accordion.Collapse>

  <Accordion.Toggle  className="btn btn-link" color="default" eventKey="2">
      Collapsible Group Item #<span className="digits">3</span>  
  </Accordion.Toggle>
  <Accordion.Collapse eventKey="2">
        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.
  </Accordion.Collapse>

</Accordion>
  
                                
                                

Components

Advance UI Elements

This is an React wrapper library for the React Scrollbar. To use this library you should get familiar with the Perfect Scrollbar documentation as well since this documentation only explains details specific to this wrapper.

Installing and usage
                              npm i react-scrollbar
                            
                                
import ScrollArea from 'react-scrollbar';
const Scrollable = () => {
  return (
    <CardBody>
        <ScrollArea 
              horizontal={false}
              vertical={true}
         >
          <div> 
            <img body src={require("../../assets/images/banner/2.jpg")} alt="" width="450" height="600" />
          </div>
        </ScrollArea>
    </CardBody>
    )
}
                                
                              
Supplemental
Installing and usage
                              npm i react-stepzilla
                            
                                
/* StepsComponent.js */
export const  DefaultStep = (props) =>  {
  return (
          <Row className="u-steps row">
            <Col sm="4" className="u-step"><span className="u-step-number">1</span>
              <div className="u-step-desc"><span className="u-step-title">Shopping</span>
                <p>Choose what you want</p>
              </div>
            </Col>
            <Col sm="4" className="u-step current"><span className="u-step-number">2</span>
              <div className="u-step-desc"><span className="u-step-title">Billing</span>
                <p>Pay for the bill</p>
              </div>
            </Col>
            <Col sm="4" className="u-step"><span className="u-step-number">3</span>
              <div className="u-step-desc"><span className="u-step-title">Getting</span>
                <p>Waiting for the goods</p>
              </div>
            </Col>
        </Row>
  );
}

import StepZilla from 'react-stepzilla';
import {DefaultStep} from "./StepsComponent";
const defaultdtep =[{name: 'Step 1',component:<DefaultStep/>}]
const Steps = () => {
  return (
    <CardBody>
      <StepZilla steps={defaultdtep} showSteps={false}  showNavigation={false}/>
    </CardBody>
    )
}
                                
                              
Supplemental
Installing and usage
                                npm i react-toastify  
                          
                              
import { ToastContainer,toast } from 'react-toastify'

<CardBody className="btn-showcase">
  <Button color="success" onClick={() => toast.success("Success Notification !")}>
  Success Notification
  </Button>
</CardBody>
<ToastContainer />
                            
                            
Supplemental
Installing and usage
                                    npm i reactour 
                              
                              
import Tour from 'reactour';

const steps = [
  {
    selector: '.step1',
    content: 'This is Profile image',
  },
]

const Tours = (props) =>  {
  const [opentour,setopentour] = useState(true)
  const closeTour = () => {
        setopentour(false);
      };
  return(
    <Tour steps={steps} isOpen={opentour} onRequestClose={closeTour} />
    <div className="avatar">
      <Media body className="step1" alt="" src={require("../../assets/images/user/7.jpg")} data-intro="This is Profile image" />
    </div>
    )
}

 
                              
                            
Supplemental
Installing and usage
                                npm i react-ratings-declarative
                          
                              
import Rating from 'react-rating'
const [rating,setRating] = useState(5);
}
const Ratingss = (props) => {
  return (
          <Rating
            initialRating={rating}
            emptySymbol="fa fa-star-o fa-2x"
            fullSymbol="fa fa-star fa-2x"
            onChange={(rate) => setRating(rate)} 
          />
  );
}
                              
                            
Supplemental
Installing and usage
                                      npm i sweetalert2
                                
                                  
import SweetAlert from 'sweetalert2'

const Sweetalert = (props) => {
  return (
        <CardBody  className="btn-showcase">
         <Button color="primary" className="sweet-1" onClick={() => SweetAlert.fire({title:"Hello world!"})}>Basic</Button>
        <CardBody>
  )
}
                                  
                                
Supplemental
Installing and usage
                                        npm i react-input-range
                                  
                                    
import React from 'react'
import InputRange from 'react-input-range'

const RangeSlider = () => {
  const initialslider = { 
    basicValue:10,
  }
  const [values, setValues ] = useState(initialslider); 

  return (
    <InputRange
        maxValue={20}
        minValue={0}
        value={values.value}
        onChange={(value) =>
          setValues({ ...values, value: value })
        }
    />
)

}

                                    
                                  
Supplemental
Installing and usage
                                          npm i react-image-crop
                                    
                                      
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
const Example = () => {
  const [crop, setCrop] = useState({ unit: '%', width: 30, aspect: 16 / 9 });
  return(
  <ReactCrop
        src={src}
        crop={crop}
        onImageLoaded={onImageLoaded}
        onComplete={onCropComplete}
        onChange={onCropChange}
  />
  )
}
                                      
                                    
Supplemental
Installing and usage
                                            npm i react-dragula
                                      
                                        
import dragula from 'react-dragula';
import  'node_modules/react-dragula/dist/dragula.css';
const DragAndDrop = (props) => {
  const dragulaDecorator = (componentBackingInstance) => {
    if (componentBackingInstance) {
        let options = {};
        dragula([componentBackingInstance], options);
        }
    };
  return (
    <Container  ref={dragulaDecorator}>
      <div>Swap me around</div>
      <div>Swap her around</div>
      <div>Swap him around</div>
      <div>Swap them around</div>
      <div>Swap us around</div>
      <div>Swap things around</div>
      <div>Swap everything around</div>
    </Container>
  )
}

                                        
                                      
Supplemental
Installing and usage
                                              npm i react-dropzone-uploader
                                        
                                          

import Dropzone from 'react-dropzone-uploader'
import 'react-dropzone-uploader/dist/styles.css'

const Dropzones = () => {

// specify upload params and url for your files
const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } }

// called every time a file's `status` changes
const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) }


// receives array of files that are done uploading when submit button is clicked
const handleSubmit = (files) => { console.log(files.map(f => f.meta)) }

return (
    <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="image/*,audio/*,video/*"
        multiple={false}
        canCancel={false}
    />
)
}
                                          
                                        
Supplemental
Installing and usage
                                              npm i react-images-upload
                                        
                                          

import ImageUploader from 'react-images-upload';


const UploadImage = () =>  {
  const [image,setimage] = useState({ pictures: [] })
   
  const onDrop = (pictureFiles, pictureDataURLs) => {
        setimage({...image,pictureFiles
        });
    }
  return (
      <ImageUploader
            withIcon={false}
            withPreview={true}
            label=""
            buttonText="Upload Images"
            onChange={onDrop}
            imgExtension={[".jpg", ".gif", ".png", ".gif", ".svg"]}
            maxFileSize={1048576}
            fileSizeError=" file size is too big"
      />
  )
}
                                          
                                        
Supplemental
Forms

Installing and usage
                                              npm i react-datepicker 
                                        
                                    
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const Example = () => {
  const [startDate,setstartDate] = useState(new Date())

  const handleChange = date => {
        setstartDate(date);
    };

  return (
    <Cardbody>
      <DatePicker 
              className="form-control digits" 
              selected={startDate} 
              onChange={handleChange}  />
    </Cardbody>
  );

}
                                    
                                  
Supplemental
Installing and usage
                                      npm i react-bootstrap-typeahead
                                    
                                      
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
const Example = () => {
  const [multiple, setMultiple] = useState(false);
  return(
    <Cardbody>
        <Typeahead
          id="basic-typeahead"
          labelKey="name"
          multiple={multiple}
          options={options}
          placeholder="Choose a state..."
        />
    </Cardbody>
  )
}
                                      
                                    
Supplemental
Tables

Installing and usage
                                      npm i reactstrap 
                                
                                        

import { Table } from 'reactstrap';

const Example = (props) => {
  return (
    <Table>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </Table>
  );
}
                                      
                                      
Supplemental
Installing and usage
                                          npm i react-data-table-component
                                    
                                      
import ReactTable from 'react-data-table-component';
const Example = () => {

  const Data = [
    {id:"1",name: "Product Menu",status: <i className="fa fa-circle font-success f-12" />,creat_on:"2018-04-18T00:00:00"},
    {id:"2",name: "Category Menu",status: <i className="fa fa-circle font-warning f-12" />,creat_on:"2018-04-18T00:00:00"}
  ]

  const Columns = [
        {name: 'ID',selector: 'id',sortable: true,center:true,},
        {name: 'Name',selector: 'name',sortable: true,center:true,},
        {name: 'Status',selector: 'status',sortable: true,center:true},
        {name: 'Creat_on',selector: 'creat_on',sortable: true,center:true},
    ];
    
return (
  <Fragment>
    <ReactTable
        columns={Columns}
        data={Data}
        noHeader
        pagination
    />
  </Fragment>
)
}

Supplemental
Charts

Installing and usage
                                         npm i react-apexcharts 
                                  
                                      
    /* Basic ApexData.jsx */

    export const apexchartsexample = {

      series: [{
        name: 'series1',
        data: [31, 40, 28, 51, 42, 109, 100]
      }, {
        name: 'series2',
        data: [11, 32, 45, 32, 34, 52, 41]
      }],
      options: {
        chart: {
          height: 350,
          type: 'area'
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        xaxis: {
          type: 'datetime',
          categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
        },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm'
          },
        },
        colors:["#7366ff", "#f73164"]
      },
  };
  import Chart from 'react-apexcharts'
  import {apexchartsexample} from './ApexData'
  
  const Apexcharts = (props)  => {
      return (
        <CardBody>
          <Chart options={apexchartsexample.options} series={apexchartsexample.series} type="area" height={350}  />
        </CardBody>
      );
    }
  }
                                      
                                      
Supplemental
Installing and usage
                                     npm i react-google-charts 
                              
                                  
import React from 'react';
import { GoogleChart } from "react-google-charts";

const GoogleCharts = (props) => {
    return (
      <GoogleChart
            width={'100%'}
            height={'400px'}
            chartType="PieChart"
            loader={<div>Loading Chart</div>}
            data={[
                ['Task', 'Hours per Day'],
                ['Work', 6.7],
                ['Eat', 13.3],
                ['Commute', 20],
                ['Watch TV', 26.7],
                ['Sleep', 33.3],
            ]}
            options={{
                title: 'My Daily Activities',
                colors: ["#51bb25", "#7366ff", "#f73164", "#148df6", "#ff5f24"]
                
            }}
            rootProps={{ 'data-testid': '1' }}
      />
    );
}
                                  
                                  
Supplemental
Installing and usage
                                     npm i knob 
                              
                                  
import React  from 'react';
import Knob,{useEffect} from "knob";

const KnobChart = () => {

  useEffect(() => {
    var exampleknob = Knob({
        value: 35,
        left: 1,
        angleOffset: 90,
        className: "review",
        thickness: 0.1,
        fgColor: "#7366ff",
        readOnly: true,
        dynamicDraw: true,
        tickColorizeValues: true,
        bgColor: '#f73164',
        lineCap: 'round',
        displayPrevious:false
    })
    document.getElementById('profit').appendChild(exampleknob);
  },[])

  return(
        <div className="knob-block text-center">
           <div className="knob" id="profit">
           </div>
        </div>
  )
}
                                  
                                  
Supplemental
Installing and usage
                                      npm i react-chartjs-2
                                
                                  
/* chartData.jsx */
export const Data = {
  labels: ['Mon', 'Tue', 'Wen', 'Thus', 'Fri', 'Sat', 'Sun'],
  datasets: [
        {
            label: 'y',
            lagend: 'y',
            data: [35, 59, 80, 81, 56, 55, 40],
            borderColor: "#7366ff",
            backgroundColor: "rgba(145, 46, 252, 0.4)",
            highlightFill: "rgba(145, 46, 252, 0.4)",
            highlightStroke: "#7366ff",
            borderWidth: 2
        },
        {
            label: 'z',
            lagend: 'z',
            data: [28, 48, 40, 19, 86, 27, 90],
            borderColor: "#f73164",
            backgroundColor: "rgba(247, 49, 100, 0.4)",
            highlightFill: "rgba(247, 49, 100, 0.4)",
            highlightStroke: "#f73164",
            borderWidth: 2
        }
    ],
    plugins: {
        datalabels: {
            display: false,
            color: 'white'
        }
    }
}
export const Options = {
  maintainAspectRatio: true,
    legend: {
        display: false,
    },
    plugins: {
        datalabels: {
            display: false,
        }
    }
}

import { Bar } from 'react-chartjs-2';
import { Data,Option} from './chartData';

const ChartjsExample = () => {
  return(
    <Cardbody>
      <Bar 
          data={Data}
          width={778}
          height={400}
          options={Options} 
      />
    </Cardbody>
  )
}
                                  
                                
Supplemental
Installing and usage
                                    npm i react-chartist
                              
                                  
import ChartistGraph from 'react-chartist';

const Chartist = (props) => {
    return (
      <Cardbody>
        <ChartistGraph 
              key="1" 
              className="ct-6 flot-chart-container" 
              data={{
                  labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                  series: [[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
                  [4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
                  [5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
                  [3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]]
              }} type={'Line'} listener={{
                  "draw": function (data) {
                      if (data.type === 'line' || data.type === 'area') {
                          data.element.animate({
                              d: {
                                  begin: 2000 * data.index,
                                  dur: 2000,
                                  from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                                  to: data.path.clone().stringify(),
                              }
                          });
                      }
                  }
              }} 
              options={chart1}
        />
      </Cardbody>
    )
  }
}
                                  
                                
Supplemental
Map

Installing and usage
                                        npm i react-google-maps 
                                  
                                    
import { withGoogleMap, GoogleMap, withScriptjs } from "react-google-maps";
const MapContainer = () => { 
  const[location,setlocation] = useState({ address: false,
    mapPosition: {
       lat: 18.5204, lng: 73.8567
      },
      markerPosition: {
       lat: 18.5204, lng: 73.8567
      }
   })

   const BasicMap = withScriptjs(
    withGoogleMap(
    props => (
      <GoogleMap google={props.google}
       defaultZoom={15}
       defaultCenter={{ lat: location.mapPosition.lat, lng: location.mapPosition.lng }}
      >
      </GoogleMap>
    )
    )
   );

  return (
      <CardBody>
      <BasicMap
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=Yourkey&libraries=places"
            loadingElement={
              <div style={{ height: `100%` }} />
            }
            containerElement={
              <div style={{ height: '300px' }} />
            }
            mapElement={
              <div style={{ height: `100%` }} />
            }
      />    
    </CardBody>
    )
}
                                    
                                  
Supplemental
Installing and usage
                                          npm i react-leaflet
                                    
                                  
import { Map as LeafletMap, TileLayer, GeoJSON, Marker, Popup } from 'react-leaflet';
import WorldData from 'world-map-geojson';
const LeafletMap = () => {
  return(
          <div id="gmap-simple" >
            <LeafletMap
                        center={[50, 10]}
                        zoom={6}
                        maxZoom={10}
                        attributionControl={true}
                        zoomControl={true}
                        doubleClickZoom={true}
                        scrollWheelZoom={true}
                        dragging={true}
                        animate={true}
                        easeLinearity={0.35}
                    >
            <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' />
            <Marker position={[50, 10]}>
            <Popup>
                  Popup for any custom information.
            </Popup>
            </Marker>
            </LeafletMap>
          </div>
      )
}
                                  
                                
Supplemental
Editors

Installing and usage
                                          npm i react-ckeditor-component
                                    
                                    
import CKEditors from "react-ckeditor-component";

const [content,setContent] = useState('content')

const onChange = (evt) => {
    const newContent = evt.editor.getData();
    setContent(newContent)
}

const Editor =  () =>  {
  return (
    <CKEditors
          activeclassName="p10"
          content={content}
          events={{
              "change": onChange
          }}
    />
    )
  }
                                    
                                  
Supplemental
Installing and usage
                                  npm i react-simplemde-editor
                              
                                  
                                  
import SimpleMDE from "react-simplemde-editor";

const [text,setText] = useState(`Enter text in the area on the left. For more info, click the ? (help) icon in the menu.`)

const handleChange = () => {
    setText("Enter text in the area on the left. For more info, click the ? (help) icon in the menu.")
}

const MdeEDitor  =  () =>  {
  return (
    <SimpleMDE
          id="editor_container"
          onChange={handleChange}
          value={text}
          options={{
              autofocus: true,
              spellChecker: false
          }}
    />
    )
  }
                                  
                                  
Supplemental
Installing and usage
                                  npm i react-ace
                              
                                  
                                  
import AceEditor from "react-ace";
import "ace-builds/webpack-resolver";
import "ace-builds/src-noconflict/theme-monokai";


const AceCodeEditor  =  () =>  {
  return (
    <AceEditor
            mode="javascript"
            theme="monokai"
            fontSize={14}
            showPrintMargin={true}
            showGutter={true}
            highlightActiveLine={true}
            height="100%"
            width="100%"
            value={`  
            /* Sample JavaScript edit source */
            // Define a module
            var app = angular.module('app', ['ui.bootstrap']);
            // Define a conroller.
            app.controller('GrokController', ['$scope', '$filter',
            function($scope, $filter) {
            $scope.today = function() {
            $scope.dt = new Date();
            };
            $scope.today();
            $scope.isOpened = false;
            $scope.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.isOpened = true;
            };
            }]);
            /* End of sample edit source */`}
            editorProps={{ $blockScrolling: true }}
            setOptions={{
            showLineNumbers: true,
            tabSize: 1,
            }}
    />
    )
  }
                                   
                                  
Supplemental

Apps

E-commerce
img1

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
img1

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

Gallery

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

To-Do
img1

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

To-Do with Firebase
img1

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

Email
img1

Use our Email application design to build complete email app

Bookmark Search
img1

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

Task
img1

You can ADD New Task to Assigned to me and remove Completed Task

Bookmark
img1

You Can ADD New Bookmark and then add to your Favioute bookmark or remove from Favioute bookmark

Calender
Installing and usage
                                    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>
)
                                
                              
Supplemental
Others
There are many others application in Cuba which is help you in improve your knowledge and solve your issues.
  • Knowledge Base
  • Job Search
  • Learning
  • Social App

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
  • Step 1:
    • 1.setup firebase project in firebase console.

      click on Get Started button

    • 2. Add new project

      create new project

      Accept the controler-terms and click on Create Project

    • 3. Go to Develop > Authentication

    • 4. Get config object for your web app

      To get the config object for a Firebase Web App:

      >> Click the Settings icon, then select Project settings.

      >> Go to the web app

      >> In Your apps card, select the nickname of the app for which you need a config object.

      >> Select Config from the Firebase SDK snippet pane.

      >> Copy the config object snippet, then add it to your app's HTML.

      copy config add on config.txt

    • 5.Next, you'll need to enable Email authentication from the authentication > Sign-in method tab:

    • 6.go to sign in method

      Make disble toggle to enable, and save changes

    • 7.Go to the authentication > Users tab then click on the Add user button and genarate email and password:

  • Step 2:
    Installing Firebase in React
    •                                           npm install ——save firebase
                                           
                                            
    • 2. Here .env file. Add your firebase credential for using Cuba with firebase and restart your app. Don't change defined variables.


      This config file manage inside the src >> data >> base.jsx folder

                                            
      import * as firebase from "firebase/app";
      import 'firebase/firestore';
      import "firebase/auth";
      
      const app = firebase.initializeApp({
        apiKey: process.env.REACT_APP_FIREBASE_KEY,
        authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
        databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
        projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
        storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
        messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGEING_SENDER_ID,
        appId:process.env.REACT_APP_FIREBASE_API_ID
      });
                                            
                                          
    • 3. Generate components in auth folder called Login and Register and use firebase in Login and Register component according to your needs.

    • 4. If you are using Application with Firebase and you might get error from Firebase Database. Message like (FirebaseError : Missing or insufficient permissions).
      The security rules read/write set as false means no one has access to the database.

                                                
      service cloud.firestore {
        match /databases/{database}/documents {
          match /{document=**} {
            allow read, write: if false;
          }
        }
      }
                                                
                                              

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.jsx

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

How to remove the firebase from Cuba theme
  • For Totally remove firebase from theme then check this video.

Thank You

Basically Our team will support in
  • 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