Introduction


Xtreme React Dashboard Template is made with purely ReactJs. This documentation will help you to understand template’s structure and how to edit. Please follow it very carefully to find out how template works and how you can edit things. You should have knowledge of ReactJs, CSS and HTML to be able to modify this template.

Support does include:

  • Answering your questions or problems regarding the template.
  • Giving solution to the Bugs reported.

Support does not include:

  • Custmaization Work
  • Any Installation Work
  • Support for any Third Party Plugins / Software
  • Support or Guide for How to integrate with any technologies (like PHP, dotnet, Java etc)

Before creating ticket, please make sure your question is regarding support only and not for custmaization and also follow full documentation to make sure the question / bug you are posting is not mentioned in documentation.

We at WrapPixel offers affordable custmaization services for our templates. For any custmaization work, please email us at [email protected].

Please give 5 star rating to our template, as rating will help other people to trust our template.


Dependencies


Browser Support

Xtreme React Admin is built to work in the latest desktop and mobile and tablet browsers.

  • Chrome (latest)
  • FireFox (latest)
  • Safari (latest)
  • Opera (latest)
  • Edge (latest)

Getting Started


Node

  • Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js is required to build the xtreme React. Download the latest version of Node and install it in your system: Download Nodejs

NPM

  • Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.
  •                                             
                                                    npm install --global [email protected]
                                                
                                            
  • Verify that npm in successfully installed, and version of installed npm will appear
  •                                             
                                                    npm --version
                                                
                                            

React Installation

  • First, unzip the zip file that you have download from ThemeForest. You will find a xtreme-react project and readme file.
  • Then after Extract zip File (xtreme-react.zip) into a folder, you have to work within.
  • Open a Node Prompt. Go to your Working Folder, And run the Following Command and wait for finish installation.
  •                                             
                                                    npm install
                                                
                                            
  • This command will install all the required node module into node_modules/ inside your working folder.
  • You are ready to run the react-xtreme application for the first time

Working with Xtreme React Admin

  • To run Xtreme React Admin, run the following command in command promt:
  •                                             
                                                    npm run start
                                                
                                            
  • Before the production you must be changes in to the following file.
  • Package.json:
    Build a Project:
                                                
                                                    npm run build
                                                
                                            

Use of Redux


Currently, we have developed just the settings of the template with redux. All the applications inside the template are being developed in redux currently. They will be updated with redux as soon as possible. Thank you.

Folder Structure


The src folder
                                        
        src/
        ├── assets
        |   ├── images
        |   ├── scss/  
        |   |   ├── all
        |   |   |   ├── bootstrap
        |   |   |   ├── custom
        |   |   |   └── icons
        |   |   ├── style.css
        |   |   ├── style.scss
        ├── components/
        |   |   └── customizer
        |   |   └── dashboard-components
        |   |   └── footer
        |   |   └── header
        |   |   └── sidebar
        |   |   └── index.js
		├── JWT/
        |   ├── _helpers
        |   ├── _Services
        | 
        ├── constants/
        |   |   └── index.js   
        ├── firebase/
        |   ├── auth.js
        |   ├── db.js
        |   ├── firebase.js
        |   └── index.ts
        ├── layouts/
        |   ├── blanklayout.jsx
        |   └── fulllayout.jsx
        ├── redux/
        |   ├── settings
        |   ├── actions.js
        |   ├── reducers.js
        |   └── store.js
        ├── routes/
        |   ├── authroutes.jsx
        |   ├── index.jsx
        |   └── routing.jsx
        ├── views/
        |   ├── authentication
        |   ├── calendar
        |   ├── charts
        |   ├── chat
        |   ├── dashboards
        |   ├── email
        |   ├── form-layouts
        |   ├── form-pickers
        |   ├── form-validation
        |   ├── form-wizard
        |   ├── icons
        |   ├── maps
        |   ├── sample-pages
        |   ├── steps
        |   ├── tables
        |   ├── ui-components
        |   └── widget
        ├── app.js
        ├── index.js
        └── logo.svg

                                        
                                    

The root folder
                                        
        main/
        ├── node_modules/...
        ├── public/...
        ├── src/...
        ├── .gitignore
        ├── package.json
        └── package-lock.json
                                        
                                    

Jwt Authentication


We have pre added JWT authentication with the template, you can use it for your backend developement.
JWT authentication in React - a login page and a secure home page.
For detailed view and tutorial you can follow this link: https://jasonwatmore.com/post/2019/04/06/react-jwt-authentication-tutorial-example

Firebase


For more details about Firebase: https://firebase.google.com/

Click On Sign In Link and Sign In with Google Account.


Steps

  • click on “Go to console” display on the right side on firebase account.
  • Then after Click on add Project.
  • After Display popup menu, Enter Project name, Select Country And Click on Terms and condition Checkbox.Click on Create Project Button.
  • Now, Display The Firebase Admin panel
  • In Left Panel, Click on Develop option. Now Click on authentication link.
  • Click on the “Web Setup” button.
  • Now, copy the configuration and change in react-xtreme project in ‘src/components/Firebase/firebase.js’.
  • Now go to sign-in Method tab.Enable Email/Password and Anonymous in sign-in providers.
  • Now, Click on database link from left Panel.
  • Click on the create a database button.
  • Display Popup in Select “start in locked mode” and Click on Enable Button.
  • Now, select real-time Database.
  • Click on rules tab. change the read and write rules from false to true.

Layouts


There are two types of layouts used in this template.


Full Layout

This layout is used for inner pages which consists header, left sidebar, customizer etc...


Blank Layout

This layout is used for authentication pages like login, register, lockscreen, forgot password which doesn't consist any of the elements that are used in the inner pages.

Style Customization


Scss folder

Scss folder is inside src/../landingpage/assets/ folder.

                                        
        scss/
        ├── all/
        |    ├── bootstrap/
        |    ├── custom/
        |    |    ├── core/
        |    |    ├── mixins/
        |    |    ├── pages/
        |    |    └── utilities/
        |    ├── icons/
        |    |    ├── crypto-icons/
        |    |    ├── flag-icon-css/
        |    |    ├── font-awesome/
        |    |    ├── material-design-iconic-font/
        |    |    ├── simple-line-icons/
        |    |    |── themify-icons/
        |    |    └── weather-icons/
        ├── style.css
        └── style.scss
                                        
                                    
# Folder/Files Details
1 bootstrap bootstrap/ folder contains all the default bootstrap components scss files.
2 core core/ folder contains all the required core scss files.
3 icons icons/ folder contains all the icons scss files used in the template.
4 mixins mixins/ folder contains custom mixin scss files.
5 custom.scss All the imported files which exist in the core and pages folders.
6 style.scss Imports all the other scss files and compiles them into single style.css
7 variable.scss Contains all the variables used in the scss files of the theme.

Icons


Below is the table of icon fonts used in this template.

Icon Name Example
Font-awesome <i class="far/fas/fab fa-icon-name"></i>
Material Icons <i class="mdi mdi-icon-name"></i>
Simple Line Icons <i class="icon-name_of_icon"></i>
Themify Icons <i class="ti-icon-name"></i>
Weather Icons <i class="wi wi-icon-name"></i>
Flag Icons <i class="flag-icon flag-icon-country-name"></i>
Crypto Icons <i class="cc coin-name" title="coin-name"></i>

Menu Structure


A modern responsive menu.


Label Config

To add a label above certain group of menu-items, do as the following example:

                                        
{
    navlabel: true,     
    name: "Personal",                   //Name of Label 
    icon: "mdi mdi-dots-horizontal",    //Material Icon
}
                                        
                                    

Single Menu Config

To add single menu item, do as the following example:

                                        
{ 
    path: '/chat',                                  //Path of specific page
    name: 'Chat',                                   //Title of that page
    icon: 'mdi mdi-comment-processing-outline',     //Material Icon
    component: Chat                                 //Component's Class Name
}
                                        
                                    

Dropdown Menu Config

To add dropdown menu item, do as the following example:

                                        
{
    collapse: true,
    path: "/dashboards",                            //Root Path of specific page
    name: "Dashboards",                             //Title of that page
    state: "dashboardpages",                        // State name
    icon: "mdi mdi-view-dashboard",                 //Material Icon
    child: [
      {
        path: "/dashboards/classic",                //Path of that specific page
        name: "Classic",                            //Title of that page
        mini: "B",
        icon: "mdi mdi-adjust",                     //Material Icon
        component: Classic                          //Component's Class Name
      },
      {
        path: "/dashboards/cryptocurrency",
        name: "Cryptocurrency",
        mini: "B",
        icon: "mdi mdi-adjust",
        component: Cryptocurrency
      },
      {
        path: "/dashboards/ecommerce",
        name: "Ecommerce",
        mini: "B",
        icon: "mdi mdi-adjust",
        component: Ecommerce
      },
      {
        path: "/dashboards/general",
        name: "General",
        mini: "B",
        icon: "mdi mdi-adjust",
        component: General
      }
    ]
}
                                        
                                    

Multiple Dropdown Menu Config

To add multi-dropdown menu item, do as the following example:

                                        
{
    path: '', 
    title: 'Menu Levels',                                   // menu name
    icon: 'mdi mdi-arrange-send-backward',                  // menu item
    class: 'has-arrow',                                     // only if dropdown-menu
    label: '', 
    labelClass: '', 
    extralink: false,
    submenu: [                                              // first-level dropdown
        { 
            path: 'javascript:void(0);', 
            title: 'Second Level', 
            icon: '', 
            class: '', 
            label: '', 
            labelClass: '', 
            extralink: true, 
            submenu: [] 
        },
        {
            path: '', 
            title: 'Second Child', 
            icon: '', 
            class: 'has-arrow', 
            label: '', 
            labelClass: '', 
            extralink: false,
            submenu: [                                      // second-level dropdown
                { 
                    path: 'javascript:void(0);', 
                    title: 'Third 1.1', 
                    icon: '', 
                    class: '', 
                    label: '', 
                    labelClass: '', 
                    extralink: false, 
                    submenu: [] 
                },
                { 
                    path: 'javascript:void(0);', 
                    title: 'Third 1.2', 
                    icon: '', 
                    class: '', 
                    label: '', 
                    labelClass: '', 
                    extralink: false, 
                    submenu: [] 
                },
            ]
        }
    ]
} 
                                        
                                    

Various Demos


There are various demo configurations available with this template. We have added some options in this theme with state management library redux and react-redux. You can change that options and create whatever kind of demo you need for your project. Below is the options for the main demo, which is included in the package. We are giving 2 ready to use demos with the package, but you can create many more by yourself.

To change this options, go to the below file:

/src/redux/settings/reducer.js

                                        
const INIT_STATE = {
    activeDir: "ltr",                      // two possible values: ltr, rtl
    activeThemeLayout: "vertical",         // fixed value. shouldn't be changed.
    activeTheme: "light",                  // two possible values: light, dark
    activeSidebarType: "full",             // four possible values: full, mini-sidebar, overlay, iconbar
    activeLogoBg: "skin6",                 // six possible values: skin(1/2/3/4/5/6)
    activeNavbarBg: "skin1",               // six possible values: skin(1/2/3/4/5/6)
    activeSidebarBg: "skin6",              // six possible values: skin(1/2/3/4/5/6)
    activeSidebarPos: "fixed",             // two possible values: fixed, absolute
    activeHeaderPos: "fixed",              // two possible values: fixed, absolute
    activeLayout: "full"                   // two possible values: full, boxed
}
                                        
                                    

Color Variations


There are six colors available with this template. Basically, we have added 6 variables in our variable.scss file, which are as below. These colors can be applied as navbar background, logo background and sidebar background. You can change values of these variables to the colors of your choice.

                                        
$skin1: #2962ff;
$skin2: #fe5419;
$skin3: #00b0ff;
$skin4: #6659f7;
$skin5: #414755;
$skin6: #fff;
                                        
                                    

How to change default applied colors of the template?

To change default applied colors of this template, do the change as follows:

  • Open the file reducer.js.
  • Path for that file is: /src/redux/settings/reducer.js
  • In that file, you have to change options. find below parameters in the options and change possible values:
  •                                             
    const INIT_STATE = {    
        activeLogoBg: "skin6",                 // six possible values: skin(1/2/3/4/5/6)
        activeNavbarBg: "skin1",               // six possible values: skin(1/2/3/4/5/6)
        activeSidebarBg: "skin6"               // six possible values: skin(1/2/3/4/5/6)    
    }
                                                
                                            

Customizer


We have added customizer as the right sidebar in this template.


For vertical layout:

From here, you can change the configuration options of the demo temporarily to try and test out other demos. Customizer is devided into 3 parts:

1. Layout Settings

In layout settings, there are 5 options.

  1. Dark Theme
  2. Fixed Sidebar
  3. Fixed Header
  4. Boxed Layout
  5. RTL Direction
2. Color Options

In color options, there are 3 options.

  1. Logo Background
  2. Navbar Background
  3. Sidebar Background

Components


This template uses ReactStrap components which contains React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. There are a few core concepts to understand in order to make the most out of this library:

  • Your content is expected to be composed via props.children rather than using named props to pass in Components.
  • Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like popperjs), or automatically include non-content based elements.

Installation

After installing the above dependencies, install reactstrap via:

                                        
                                            npm install --save reactstrap react react-dom
                                        
                                    

Once installed you need to import main module.

                                        
                                            import { component_name } from 'reactstrap';
                                            //For e.g
                                            import { Row,Col,Card,CardBody } from 'reactstrap'; //For import any component
                                        
                                    

Alert


How you can use this component ?
You have to import Alert like as below:
                                                
                                                    import { Alert } from 'reactstrap';
                                                
                                            
After import the alert, add alert into the page that's will be like below:
                                                
                                                    const Example = (props) => {
                                                      return (
                                                        <div> 
                                                            <Alert color="primary"> 
                                                                This is a primary alert — check it out! 
                                                            </Alert> 
                                                        </div>
                                                      );
                                                    };
                                                
                                            

Refer following links for usage and detail information:

Badge


How you can use this component ?
You have to import Badge like as below:
                                                
                                                    import { Badge } from 'reactstrap';
                                                
                                            
After import the badge, add badge into the page that's will be like below:
                                                
                                                    const Example = (props) => {
                                                      return (
                                                        <div> 
                                                            <h4>Heading <Badge color="secondary">New</Badge></h4>
                                                        </div>
                                                      );
                                                    };
                                                
                                            

Refer following links for usage and detail information:

Buttons


How you can use this component ?
You have to import Button like as below:
                                                
                                                    import { Button } from 'reactstrap';
                                                
                                            
After import the Button, add Button into the page that's will be like below:
                                                
                                                    const Example = (props) => {
                                                      return (
                                                        <div>
                                                          <Button color="primary">primary</Button>
                                                        </div>
                                                      );
                                                    };
                                                
                                            

Refer following links for usage and detail information:

Button Dropdown


How you can use this component ?
You have to import Button Dropdown like as below:
                                                
                                                    import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
                                                
                                            
After import the Button Dropdown, add Button Dropdown into the page that's will be like below:
                                                
                                                    //For Toggle a dropdown
                                                    constructor(props) {
                                                      super(props);

                                                      this.toggle = this.toggle.bind(this);
                                                      this.state = {
                                                        dropdownOpen: false
                                                      };
                                                    }

                                                    toggle() {
                                                      this.setState({
                                                        dropdownOpen: !this.state.dropdownOpen
                                                      });
                                                    }
                                                    //Button dropdown code
                                                    return (
                                                      <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                                                        <DropdownToggle caret>
                                                          Button Dropdown
                                                        </DropdownToggle>
                                                        <DropdownMenu>
                                                          <DropdownItem header>Header</DropdownItem>
                                                          <DropdownItem disabled>Action</DropdownItem>
                                                          <DropdownItem>Another Action</DropdownItem>
                                                          <DropdownItem divider />
                                                          <DropdownItem>Another Action</DropdownItem>
                                                        </DropdownMenu>
                                                      </ButtonDropdown>
                                                    );
                                                
                                            

Refer following links for usage and detail information:

Button Group


How you can use this component ?
You have to import Button Group like as below:
                                                
                                                    import { Button, ButtonGroup } from 'reactstrap';
                                                
                                            
After import the Button Group, add Button Group into the page that's will be like below:
                                                
                                                    <ButtonGroup>
                                                      <Button>Left</Button>
                                                      <Button>Middle</Button>
                                                      <Button>Right</Button>
                                                    </ButtonGroup>
                                                
                                            

Refer following links for usage and detail information:

Cards


How you can use this component ?
You have to import Cards like as below:
                                                
                                                    import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle, Button } from 'reactstrap';
                                                
                                            
After import the Cards, add Cards into the page that's will be like below:
                                                
                                                    <Card>
                                                      <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
                                                      <CardBody>
                                                        <CardTitle>Card title</CardTitle>
                                                        <CardSubtitle>Card subtitle</CardSubtitle>
                                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                                        <Button>Button</Button>
                                                      </CardBody>
                                                    </Card>
                                                
                                            

Refer following links for usage and detail information:

Collpase


How you can use this component ?
You have to import Collpase like as below:
                                                
                                                    import { Collapse, Button, CardBody, Card } from 'reactstrap';
                                                
                                            
After import the Collpase, add Collpase into the page that's will be like below:
                                                
                                                    //For toggle a collpase
                                                    constructor(props) {
                                                      super(props);
                                                      this.toggle = this.toggle.bind(this);
                                                      this.state = { collapse: false };
                                                    }

                                                    toggle() {
                                                      this.setState({ collapse: !this.state.collapse });
                                                    }
                                                    //Code of component
                                                    <div>
                                                      <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
                                                      <Collapse isOpen={this.state.collapse}>
                                                        <Card>
                                                          <CardBody>
                                                          Anim pariatur cliche reprehenderit,
                                                           enim eiusmod high life accusamus terry richardson ad squid. Nihil
                                                           anim keffiyeh helvetica, craft beer labore wes anderson cred
                                                           nesciunt sapiente ea proident.
                                                          </CardBody>
                                                        </Card>
                                                      </Collapse>
                                                    </div>
                                                
                                            

Refer following links for usage and detail information:

Dropdowns


How you can use this component ?
You have to import Dropdowns like as below:
                                                
                                                    import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
                                                
                                            
After import the Dropdowns, add Dropdowns into the page that's will be like below:
                                                
                                                  //For toggle a dropdown
                                                  constructor(props) {
                                                    super(props);

                                                    this.toggle = this.toggle.bind(this);
                                                    this.state = {
                                                      dropdownOpen: false
                                                    };
                                                  }

                                                  toggle() {
                                                    this.setState(prevState => ({
                                                      dropdownOpen: !prevState.dropdownOpen
                                                    }));
                                                  }
                                                  //Code of component
                                                  render() {
                                                    return (
                                                      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                                                        <DropdownToggle caret>
                                                          Dropdown
                                                        </DropdownToggle>
                                                        <DropdownMenu>
                                                          <DropdownItem header>Header</DropdownItem>
                                                          <DropdownItem disabled>Action</DropdownItem>
                                                          <DropdownItem>Another Action</DropdownItem>
                                                          <DropdownItem divider />
                                                          <DropdownItem>Another Action</DropdownItem>
                                                        </DropdownMenu>
                                                      </Dropdown>
                                                    );
                                                  }
                                                
                                            

Refer following links for usage and detail information:

Fade


How you can use this component ?
You have to import Fade like as below:
                                                
                                                    import { Button, Fade } from 'reactstrap';
                                                
                                            
After import the Fade, add Fade into the page that's will be like below:
                                                
                                                  //Fade Code
                                                  constructor(props) {
                                                      super(props);
                                                      this.state = { fadeIn: true };
                                                      this.toggle = this.toggle.bind(this);
                                                  }
                                                  render() {
                                                    return (
                                                        <div>
                                                            <Button color="primary" onClick={this.toggle}>Toggle Fade</Button>
                                                            <Fade in={this.state.fadeIn} tag="h5" className="mt-3">
                                                                This content will fade in and out as the button is pressed
                                                            </Fade>
                                                        </div>
                                                    );
                                                  }

                                                  toggle() {
                                                      this.setState({
                                                          fadeIn: !this.state.fadeIn
                                                      });
                                                  }
                                                
                                            

Refer following links for usage and detail information:

Jumbotron


How you can use this component ?
You have to import Jumbotron like as below:
                                                
                                                    import { Jumbotron, Button } from 'reactstrap';
                                                
                                            
After import the Jumbotron, add Jumbotron into the page that's will be like below:
                                                
                                                  <Jumbotron>
                                                    <h1 className="display-3">Hello, world!</h1>
                                                    <p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
                                                    <hr className="my-2" />
                                                    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                                                    <p className="lead">
                                                      <Button color="primary">Learn More</Button>
                                                    </p>
                                                  </Jumbotron>
                                                
                                            

Refer following links for usage and detail information:

Layout


How you can use this component ?
You have to import Layout like as below:
                                                
                                                    import { Container, Row, Col } from 'reactstrap';
                                                
                                            
After import the Layout, add Layout into the page that's will be like below:
                                                
                                                  <Container>
                                                    <Row>
                                                      <Col>.col</Col>
                                                    </Row>
                                                  </Container>
                                                
                                            

Refer following links for usage and detail information:

List Group


How you can use this component ?
You have to import List Group like as below:
                                                
                                                    import { ListGroup, ListGroupItem } from 'reactstrap';
                                                
                                            
After import the List Group, add List Group into the page that's will be like below:
                                                
                                                  return (
                                                    <ListGroup>
                                                      <ListGroupItem>Cras justo odio</ListGroupItem>
                                                      <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
                                                      <ListGroupItem>Morbi leo risus</ListGroupItem>
                                                      <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
                                                      <ListGroupItem>Vestibulum at eros</ListGroupItem>
                                                    </ListGroup>
                                                  );
                                                
                                            

Refer following links for usage and detail information:

Media


How you can use this component ?
You have to import Media like as below:
                                                
                                                    import { Media } from 'reactstrap';
                                                
                                            
After import the Media, add Media into the page that's will be like below:
                                                
                                                  <Media>
                                                    <Media left href="#">
                                                      <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
                                                    </Media>
                                                    <Media body>
                                                      <Media heading>
                                                        Media heading
                                                      </Media>
                                                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                    </Media>
                                                  </Media>
                                                
                                            

Refer following links for usage and detail information:

Modals


How you can use this component ?
You have to import Modals like as below:
                                                
                                                    import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
                                                
                                            
After import the Modals, add Modals into the page that's will be like below:
                                                
                                                  constructor(props) {
                                                    super(props);
                                                    this.state = {
                                                      modal: false
                                                    };

                                                    this.toggle = this.toggle.bind(this);
                                                  }

                                                  toggle() {
                                                    this.setState({
                                                      modal: !this.state.modal
                                                    });
                                                  }

                                                  render() {
                                                    return (
                                                      <div>
                                                        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
                                                        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                                                          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
                                                          <ModalBody>
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                          </ModalBody>
                                                          <ModalFooter>
                                                            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
                                                            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
                                                          </ModalFooter>
                                                        </Modal>
                                                      </div>
                                                    );
                                                  }
                                                
                                            

Refer following links for usage and detail information:

Popovers


How you can use this component ?
You have to import Pagination like as below:
                                              
                                                  import  {  Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
                                              
                                          
After import the Pagination, add Pagination into the page that's will be like below:
                                            
                                              constructor(props) {
                                                super(props);

                                                this.toggle = this.toggle.bind(this);
                                                this.state = {
                                                  popoverOpen: false
                                                };
                                              }

                                              toggle() {
                                                this.setState({
                                                  popoverOpen: !this.state.popoverOpen
                                                });
                                              }

                                              render() {
                                                return (
                                                  <div>
                                                    <Button id="Popover1" onClick={this.toggle}>
                                                      Launch Popover
                                                    </Button>
                                                    <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
                                                      <PopoverHeader>Popover Title</PopoverHeader>
                                                      <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
                                                    </Popover>
                                                  </div>
                                                );
                                              }
                                            
                                          

Refer following links for usage and detail information:

Progress


How you can use this component ?
You have to import Progress like as below:
                                              
                                                  import  {  Progress } from 'reactstrap';
                                              
                                          
After import the Progress, add Progress into the page that's will be like below:
                                            
                                              <div className="text-center">0%</div>
                                              <Progress />
                                            
                                          

Refer following links for usage and detail information:

Tables


How you can use this component ?
You have to import Tables like as below:
                                              
                                                  import  {  Table  } from 'reactstrap';
                                              
                                          
After import the Tables, add Tables into the page that's will be like below:
                                            
                                              <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>
                                            
                                          

Refer following links for usage and detail information:

Tabs


How you can use this component ?
You have to import Tabs like as below:
                                              
                                                  import  { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
                                              
                                          
After import the Tabs, add Tabs into the page that's will be like below:
                                            
                                              constructor(props) {
                                                super(props);

                                                this.toggle = this.toggle.bind(this);
                                                this.state = {
                                                  activeTab: '1'
                                                };
                                              }

                                              toggle(tab) {
                                                if (this.state.activeTab !== tab) {
                                                  this.setState({
                                                    activeTab: tab
                                                  });
                                                }
                                              }
                                              render() {
                                                return (
                                                  <div>
                                                    <Nav tabs>
                                                      <NavItem>
                                                        <NavLink
                                                          className={classnames({ active: this.state.activeTab === '1' })}
                                                          onClick={() => { this.toggle('1'); }}
                                                        >
                                                          Tab1
                                                        </NavLink>
                                                      </NavItem>
                                                      <NavItem>
                                                        <NavLink
                                                          className={classnames({ active: this.state.activeTab === '2' })}
                                                          onClick={() => { this.toggle('2'); }}
                                                        >
                                                          Moar Tabs
                                                        </NavLink>
                                                      </NavItem>
                                                    </Nav>
                                                    <TabContent activeTab={this.state.activeTab}>
                                                      <TabPane tabId="1">
                                                        <Row>
                                                          <Col sm="12">
                                                            <h4>Tab 1 Contents</h4>
                                                          </Col>
                                                        </Row>
                                                      </TabPane>
                                                      <TabPane tabId="2">
                                                        <Row>
                                                          <Col sm="6">
                                                            <Card body>
                                                              <CardTitle>Special Title Treatment</CardTitle>
                                                              <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                                                              <Button>Go somewhere</Button>
                                                            </Card>
                                                          </Col>
                                                          <Col sm="6">
                                                            <Card body>
                                                              <CardTitle>Special Title Treatment</CardTitle>
                                                              <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                                                              <Button>Go somewhere</Button>
                                                            </Card>
                                                          </Col>
                                                        </Row>
                                                      </TabPane>
                                                    </TabContent>
                                                  </div>
                                                );
                                              }
                                            
                                          

Refer following links for usage and detail information:

Tooltips


How you can use this component ?
You have to import Tooltips like as below:
                                              
                                                  import  { Tooltip } from 'reactstrap';
                                              
                                          
After import the Tooltips, add Tooltips into the page that's will be like below:
                                            
                                              constructor(props) {
                                                super(props);

                                                this.toggle = this.toggle.bind(this);
                                                this.state = {
                                                  tooltipOpen: false
                                                };
                                              }

                                              toggle() {
                                                this.setState({
                                                  tooltipOpen: !this.state.tooltipOpen
                                                });
                                              }

                                              render() {
                                                return (
                                                  <div>
                                                    <p>Somewhere in here is a <span style={{textDecoration: "underline", color:"blue"}} href="#" id="TooltipExample">tooltip</span>.</p>
                                                    <Tooltip placement="right" isOpen={this.state.tooltipOpen} target="TooltipExample" toggle={this.toggle}>
                                                      Hello world!
                                                    </Tooltip>
                                                  </div>
                                                );
                                              }
                                            
                                          

Refer following links for usage and detail information:

Forms


Basic Form

Basic form labels have inline block styling where form controls are below its label. This is the default bootstrap and most basic style for displaying forms. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..

Refer following links for usage:

Type URL
Template Page http://wrappixel.com/demos/react-admin-templates/xtreme-react-admin/main/#/form-layouts/basic

Horizontal Form

Horizontal Forms labels have inline styling where form controls are in the same line as its label. Add inline attribute to the Form tag to have horizontal form styling. You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..


Form Validation

This form provides full form validations.

Refer following links for usage:

Type URL
Template Page http://wrappixel.com/demos/react-admin-templates/xtreme-react-admin/main/#/form-validation

Datepicker

Directives :

Directive Selector Description
Datetime react-datetime It can be used as a datepicker, timepicker or both at the same time. It is highly customizable and it even allows to edit date's milliseconds.

Refer following links for usage:

Type URL
For More Information https://www.npmjs.com/package/react-datetime
Template Page http://wrappixel.com/demos/react-admin-templates/xtreme-react-admin/main/#/form-pickers/datetimepicker

Tables


Basic Table

Using the most basic table markup, here’s how Table-based tables look in Reactstrap. All table styles are inherited in Reactstrap, meaning any nested tables will be styled in the same manner as the parent.

                                        
                                            <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>
                                        
                                    
Reactstrap Tables Options Attribute Description
Dark table dark Using dark attribute you can easliy invert into the dark table.
Striped rows striped Using striped attribute you can easliy invert into the Striped row table.
Bordered table bordered Using bordered attribute you can easliy invert into the Bordered table.
Borderless table borderless Using borderless attribute you can easliy invert into the BorderLess table.
Hoverable rows hover Using hover attribute you can easliy invert into the Hoverable table.
Small table size="sm" Using size="sm" attribute you can easliy invert into the Small table.
Responsive table responsive Using responsive attribute you can easliy invert into the Responsive table.

React Table

Refer following links for usage and detail information:


React Bootstrap Table

Refer following links for usage and detail information:

Charts


Chart JS

Refer following links for usage and detail information:


C3 Chart

Refer following links for usage and detail information:

Calendar


Refer following links for usage and detail information:

Free support


If you have any type of query or issue, feel free to contact us.

Thank you
© 2018 Xtreme React admin by wrappixel.com