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 Safee 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 [navbarFixed, setNavbarFixed] = useState(false);
    const [isDark, setIsDark] = useState(false);
    const [isThemeDirection, setIsThemeDirection] = useState(false);
    const [topNavbarBgColor, setTopNavbarBgColor] = useState("white");

    return (
        <DashboardDataCreateContext.Provider
            value={{
                topNavbarBgColor,
                setTopNavbarBgColor,
                navbarFixed,
                setNavbarFixed,
                isDark,
                setIsDark,
                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).

Navbar Fixed

Name	Type	Default	Description
navbarFixed	boolean	false	A boolean value that indicates the position of the navbar. If navbarFixed is false, the navbar will be normal. If navbarFixed is true, the navbar will be fixed at the top of the page.

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.