DashLite React Documentation
DashLite React is a modern and user friendly dashboard template with individual concepts.
Introduction
DashLite React, a modern and clean premium quality dashboard template based on Bootstrap 5 using concept driven and minimal design. Its well optimized with mobile first responsive approach. DashLite React is built using SASS preprocessor, HTML5, CSS3 and help of usefull npm plugins. The template is built with the latest version of a javascript framework called React, making it completely free of jquery dependency. You can use this template for any kind of dashboard project.
It is made up of react hooks. In few instances, context api has been used for better handling of the application. For optimization purposes Lazy Loading have been introduced, this should increase the performance of the application. All these are kept a file structure which is very easy to handle and extremely user friendly.
Quick Start - install
- - Download the latest theme source from themeforest.
- - Download and install Node.js from nodejs.org/en/download/
-
- Start command prompt window or terminal and change directory to [dashLite-react/demo{1|2|3|4|5|6}] folder and run following command to install all the "dependencies and devDependencies". It could take few minutes to complete installation.
npm install
-
- Then start the development server on
localhost:3000usenpm startnpm start
$ export PORT=3005 #Linux $ $env:PORT=3005 # Windows - Powershell
Production Build
-
- For production build, use
npm run build. A build folder will be created with the bundled files.npm run build
-
Following the execution of this code, a new folder called build folder will be created in the root folder.
If you’re using Apache HTTP Server, you need to create a .classComponent file in the public folder which has been already provided in the public folder, or just add the file with the following codeOptions -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L] - - Add the entire url of the domain at the homepage field in package.json file.
File And Folders
|--docs/ |--dashLite-template/ |--|--demo1 |--|--|--build/ |--|--|--public/ |--|--|--src/ |--|--|--|--assets/ |--|--|--|--|--css/ |--|--|--|--|--fonts/ |--|--|--|--|--images/ |--|--|--|--|--scss/ |--|--|--|--components/ |--|--|--|--|--block/ |--|--|--|--|--button/ |--|--|--|--|--chats/ |--|--|--|--|--email/ |--|--|--|--|--grid/ |--|--|--|--|--icon/ |--|--|--|--|--input/ |--|--|--|--|--|--switch/ |--|--|--|--|--links/ |--|--|--|--|--pagination/ |--|--|--|--|--partials/ |--|--|--|--|--preview/ |--|--|--|--|--select/ |--|--|--|--|--sidebar/ |--|--|--|--|--table/ |--|--|--|--|--text/ |--|--|--|--|--tooltip/ |--|--|--|--|--user/ |--|--|--|--|--Component.js |--|--|--|--images/ |--|--|--|--layout/ |--|--|--|--|--content/ |--|--|--|--|--footer/ |--|--|--|--|--head/ |--|--|--|--|--logo/ |--|--|--|--|--menu/ |--|--|--|--|--news/ |--|--|--|--|--provider/ |--|--|--|--|--sidebar/ |--|--|--|--|--index.js |--|--|--|--pages/ |--|--|--|--|--app/ |--|--|--|--|--auth/ |--|--|--|--|--components/ |--|--|--|--|--error/ |--|--|--|--|--others/ |--|--|--|--|--pre-built/ |--|--|--|--|--Analytic.js |--|--|--|--|--Crypto.js |--|--|--|--|--Homepage.js |--|--|--|--|--Invest.js |--|--|--|--route/ |--|--|--|--utils/ |--|--|--|--App.js |--|--|--|--App.test.js |--|--|--|--index.js |--|--|--.env |--|--|--package-lock.json |--|--|--package.json |--|--demo2 |--|--|--src/ | More
Styles
SCSS File List
All the scss files are linked to the react app inIndex.js file of the root folder
<!-- All Generated styles form dashlite --> import "assets/scss/dashlite.scss" import "assets/scss/email-style.scss" <!-- You can add your own css or scss files in a similar way --> import "assets/scss/YOUR_FILE.scss"
Theming
Dark mode
Visit the directory, src/layout/provider/Theme.js. There is an js object name defaultTheme theme initially, just change skin : "dark" for dark mode.
You can also change theme for sidebar or header individualy.
Themes include :dark || light || white || theme
Example
// Light skin
{
header : "light",
sidebar : "white",
skin : "light"
}
// Dark skin
{
header : "dark",
sidebar : "dark",
skin : "dark",
}
Create A Component
Creating a new component.
By default react provides two different types of components. Create a folder in the /src/pages directory. Then add it to the routing system. Go through the Routing section to learn further.
Class Based Components
import React from "react"
class Example extends React.Component {
render () {
return (
<div>
// The jsx goes here
<div/>
)
}
}
export default Example;
Functional Components
import React from "react"
const Example = () => {
return (
<div>
// The jsx goes here
<div/>
)
}
export default Example;
Add menu to the sidebar
Creating a new component.
To add any directory to the menubar or sidebar. You can add it to the MenuData.js file. The file is located in the directory src/layout/menu. You can also add the desired icon along with any subdirectories. Here is an example.
{
icon: "tile-thumb", // Icon name
text: "New Page", // Directory name
active: false, // false for being collapsed by default
subMenu: [ // sub directory
{
text: "New Page Cards",
link: "/page-card", //route link
},
{
text: "New Page List",
link: "/page-list", // route link
},
],
},
Adding badges to menu.
To add any badge to any content of the menu. You can add it to the MenuData.js file. The file is located in the directory src/layout/menu. Here is an example.
{
icon: "tile-thumb", // Icon name
text: "New Page", // Directory name
active: false, // false for being collapsed by default
subMenu: [ // sub directory
{
text: "New Page Cards",
link: "/page-card", //route link
badge: "new" // badge
},
{
text: "New Page List",
link: "/page-list", // route link
},
],
},
Routing
All the routes are defined in the Index.js file in the src/route directory. Checkout following code example.
<Route path="/route_here" element={<Component />} />