Skip to main content

Configuration

Context is a React feature that allows us to share data across our components without passing props manually. Context is useful when we have some global state or configuration that affects our entire application. In this template, we've used Context to manage the appearance and behavior of Dashio Dashboard.

You can find the context file on this location src/context/dashboardDataContext.jsx

Syntax to declare dashboardDataContext.jsx

Configuration
import { createContext, useContext, useEffect, useState } from "react";

export const DashboardDataCreateContext = createContext();

export const DashboardDataProvider = ({ children }) => {
const [isThemeDirection, setIsThemeDirection] = useState(false);
const [sidebarMini, setSidebarMini] = useState(false);
const [isDark, setIsDark] = useState(false);
const [topNavbarBgColor, setTopNavbarBgColor] = useState("white");
const [sidebarBgColor, setSidebarBgColor] = useState("black");
const [sidebarBgImg, setSidebarBgImg] = useState();

return (
<DashboardDataCreateContext.Provider
value={{
sidebarMini,
setSidebarMini,
sidebarBgColor,
setSidebarBgColor,
topNavbarBgColor,
setTopNavbarBgColor,
isDark,
setIsDark,
sidebarBgImg,
setSidebarBgImg,
isThemeDirection,
setIsThemeDirection,
}}
>
{children}
</DashboardDataCreateContext.Provider>
);
};

export const useDashboardDataContext = () => {
return useContext(DashboardDataCreateContext);
};

Theme Direction (LTR - RTL)

NameTypeDefaultDescription
isThemeDirectionbooleanfalse

A boolean value that indicates the direction (LTR/RTL) of the theme. If isThemeDirection is false, the theme will be left-to-right (LTR). If isThemeDirection is true, the theme will be right-to-left (RTL).


NameTypeDefaultDescription
sidebarMinibooleanfalse

A boolean value that indicates the size of the sidebar. If sidebarMini is false, the sidebar will be expanded. If sidebarMini is true, the sidebar will be collapsed.


Dark/Light Mode

NameTypeDefaultDescription
isDarkbooleanfalse

A boolean value that indicates the mode of the theme. If isDark is false, the theme will be light mode. If isDark is true, the theme will be dark mode.


NameTypeDefaultDescription
topNavbarBgColorstringwhite

A string value that indicates the background color of the top navbar. You can choose from three options: white, red, or black. The background color of the top navbar will be changed accordingly.


NameTypeDefaultDescription
sidebarBgColorstringblack

A string value that indicates the background color of the sidebar. You can choose from three options: white, red, or black. The background color of the sidebar will be changed accordingly.


NameTypeDefaultDescription
sidebarBgImgstring

A string value that indicates the background image of the sidebar. You can use any valid image link as the value of sidebarBgImg. The background image of the sidebar will be changed accordingly.For example, setSidebarBgImg: https://example.com/image.jpg will make the sidebar use the image from the link.