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 Reacty 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);

    return (
        <DashboardDataCreateContext.Provider
            value={{
                sidebarMini,
                setSidebarMini,
                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).

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.