Theme Color

Font Settings

Settings

104 Picture

Your gallery download complete

Download now

813 Point

You are doing great job!

Read now

3,756

New Followers on Twitter

Find more
  • Anyone send me a message
  • Anyone seeing my profile page
  • Anyone posts a comment on my post

Documentation

Indiro - Factory & Industrial React Template

Indiro is a popular WebApp template for multi purpose use . It’s responsive React template, which is based on the Bootstrap framework. It utilizes all of the Bootstrap components in design and re-styles many commonly used plugins to create a consistent design that can be used in all type of business an organisations website.

Theme Features

package/public/index.html

RTL Version

  • Add Attribute dir="rtl"

    <html lang="en" dir="rtl">
    

Dark Mode

  • <body class="layout-dark">
    

Layout

  • Boxed
    <body id="bg" class="boxed">
    
  • frame
    <body id="bg" class="frame">
    

Header

  • Header Fixed is-fixed
    <div class="main-bar-wraper navbar-expand-lg sticky-header is-fixed">
    
  • Header Static sticky-no
    <div class="main-bar-wraper navbar-expand-lg sticky-no">
    

Background Color

  • You can use body background color but it will only work in boxed layout

    <body id="bg" class="boxed" style="background-color: rgb(255, 175, 41);">
    

Background Image

  • You can use body background image but it will only work in boxed layout

    <body id="bg" class="boxed" style="background-image: url("images/background/bg1.jpg");">
    

Color Theme

  • So many color option available

    <body data-theme-color="color_1">
    
  • Color 1
  • Color 2
  • Color 3
  • Color 4
  • Color 5
  • Color 6
  • Color 7
  • Color 8
  • Color 9

  • Bootstrap
  • Built in SASS
  • Fully Responsive
  • Ready to used widget
  • Detailed Documentation
  • Customizable React Bootstrap Components
  • Slider
  • Portfolio
  • Key Feature
  • News Letter
  • Pricing Plan
  • Testimonial
  • Query Form
  • FAQ
  • Contact Form
  • Style Varient
  • Social
  • Blog Style
  • Coming Soon Page
  • Error Page
  • Blog Page
  • Site Down page

React.JS Installation & Setup A JavaScript library for building user interfaces.

Installing

Make sure if NODEJS is installed on your computer

Run npm install -g create-react-app command from your teminal to install React Globally.

Install npm :-
Run npm install command from your project directory. It will create 'node_module' folder in this all dependency files will be install with this command.

Run Project :-
Run npm start command from your project directory. With is command file will be compiled and it will be loaded on local server `http://localhost:5000`.

Production Build :-
Run npm run build Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Further help :-
To get more help on the React.js checkout React

Note: You can learn more in the Create React App Documentation. To learn React, check out the React Documentation.

1.- Install Node.js :
To compile Sass via the command line first, we need to install node.js. The easiest way is downloading it from the official website nodejs.org open the package and follow the wizard.

2.- Install Node-Sass :
Node-sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install node-sass run the following command in your terminal:
Run :- npm install node-sass

3.- Write Node-sass Command :
Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this: In the scripts section add an scss command

"scripts": {
  "sass": "node-sass --watch scss/main.scss css/style.css"
},

4.- Run the Script :
To execute our one-line script, we need to run the following command in the terminal
Run :- npm run scss

Main Content

_app.js Structure
<!-- START CONTENT -->
import Index from './pages/Index';	
import "./assets/css/style.css";
import "./assets/css/skin/skin-1.css";

function App() {
 return (
  <div className="App">
   <Index />
  </div>	
 );
}

export default App;
<!-- END CONTENT -->

Dependencies

package.json
"dependencies": {
 "@emailjs/browser": "^3.6.2",
 "@testing-library/jest-dom": "^5.16.1",
 "@testing-library/react": "^12.1.2",
 "@testing-library/user-event": "^13.5.0",
 "node-sass": "^7.0.1",
 "react": "^17.0.2",
 "react-bootstrap": "^2.3.1",
 "react-chartjs-2": "^4.1.0",
 "react-countup": "^6.2.0",
 "react-dom": "^17.0.2",
 "react-modal-video": "^1.2.8",
 "react-responsive-masonry": "^2.1.4",
 "react-router-dom": "^5.2.0",
 "react-scripts": "5.0.1",
 "simple-react-lightbox": "^3.5.1",
 "swiper": "^8.1.4",
 "web-vitals": "^2.1.4",
 "wowjs": "^1.1.3"
}

Create a Page

How to create a custom page

1. Create page pages\blank.js

function Blank() {

export function MyPage() {
  return(
   <h1>Hello!</h1>
  ) 
} 	
export default Blank;						
						
Folder Directories
  • public
    • index.html
  • src
    • assets
    • css
    • icons
      • themify
      • line-awesome
      • iconfont
      • flaticon
      • font-awesome
    • scss
      • abstracts
      • base
      • components
      • layout
      • pages
      • main.scss
    • images
      • about
      • background
      • blog
      • bnr
      • gallery
      • logo
      • main-slider
      • media
      • pattern
      • portfolio
      • pricing
      • product
      • projects
      • services
      • team
      • testimonials
      • under-construct
      • work
    • vendor
      • animate
      • aos
      • bootstrap
      • swiper
    • components
      • Index2
      • Index3
      • Index4
      • Index5
      • BannerSlider.js
      • BlogDetailsWideSection.js
      • BlogGridSlider.js
      • BlogRightSidebarSlider.js
      • BlogSideNavLink.js
      • ClientsSlider.js
      • DonutChart.js
      • DonutChart2.js
      • FooterSingUp.js
      • PortfolioSlider.js
      • ProductSlider.js
      • RealtedItemSwiper.js
      • SidebarSection.js
      • TestimonialSlider.js
      • VideoPopup.js
    • layouts
      • CommanHeader.js
      • Footer.js
      • Footer2.js
      • Footer3.js
      • Footer4.js
      • Footer5.js
      • Header.js
      • Header2.js
      • Header3.js
      • Header4.js
      • Header5.js
      • PageTitle.js
      • ScrollToTop.js
    • pages
      • Index.js
      • Home.js
      • Home2.js
      • Home3.js
      • Home4.js
      • Home5.js
      • AboutUs.js
      • AboutMe.js
      • ComingSoon.js
      • CompanyHistory.js
      • ContactUs.js
      • ErrorPage.js
      • GalleryGrid4.js
      • GalleryMasonry.js
      • HelpDesk.js
      • Pricing.js
      • PrivacyPolicy.js
      • Services.js
      • Team.js
      • Portfolio.js
      • PortfolioDetails.js
      • ShopGrid3.js
      • ProductDetails.js
      • ShopWishlist.js
      • ShopCheckout.js
      • ShopCart.js
      • Login.js
      • PortfolioCollage.js
      • BlogGrid.js
      • BlogRightSidebar.js
      • BlogListSidebar.js
      • BlogListLeftSidebar.js
      • BlogDetailsPostWide.js
      • BlogDetails.js
    • App.js
    • index.js
  • package.json

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.

REGULAR SUPPORT : You have in template support if you face any issue with the usage of it then you can contact us on below Email ID.

EXTENDED SUPPORT : Development it is chargeable according to your requirement. For that you need to mail us your requirement on below Email ID.

COST OF SERVICE : Depends on the hours required. But as you are already using our template we have discounted rates for our template customer.

EXTENDED LICENSE : With the Extended Support we also include Extended License. So you save much more with your investment than you will with purchasing Regular License and later buying Extended one + Development cost.

You will get a quick reply from our team and feel free to contact us. We don’t charge for requirement discussion so don’t worry.

Contact Us : rahulxarma@gmail.com

Skype : rahulxarma