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)

Name	Type	Default	Description
isThemeDirection	boolean	false	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).

Sidebar expanded and collapsed

Name	Type	Default	Description
sidebarMini	boolean	false	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

Name	Type	Default	Description
isDark	boolean	false	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.

Navbar Top Background

Name	Type	Default	Description
topNavbarBgColor	string	white	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.

Sidebar Background

Name	Type	Default	Description
sidebarBgColor	string	black	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.

Sidebar Background Image

Name	Type	Default	Description
sidebarBgImg	string		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.