Settings Context Documentation

Overview

The Settings Context in the AMRO admin template is responsible for managing and providing access to global settings and state throughout your application. It allows you to customize various aspects of the user interface, such as language settings, theme preferences, and responsive behavior.

Basic Usage

To use the Settings Context in your components, follow these steps:

1. Import the Context: Import the SettingsContext and useSettings hook from the appropriate module:

   import { SettingsContext, useSettings } from "@/context/settingsContext";

2. Access Settings: Use the useSettings hook to access the settings and state values within your components:

   const { settings, saveSettings, isMobile, isDesktop } = useSettings();

3. Update Settings: Call the saveSettings function to update the settings state:

   saveSettings(updatedSettings);

Available Settings

The Settings Context provides access to the following settings and state values:

• settings: The current settings object containing various configuration options such as language, theme, and layout preferences.
• saveSettings: A function to update and save the settings object to local storage and cookies.
• hydration: A boolean value indicating whether the context has finished hydrating (useful for preventing rendering inconsistencies).
• defaultDictionary: The default dictionary for internationalization (i18n) based on the selected language.
• isMobile, isTablet, isLaptop, isDesktop: Boolean values indicating the device type based on screen size.
• mobileNav: A boolean value representing the state of the mobile sidebar navigation.
• mobileNavToggle: A function to toggle the state of the mobile sidebar navigation.

Example Usage

Here's an example of how you can use the Settings Context in your Next.js components:

import { useSettings } from "@/context/settings";
 
export default function ExampleComponent() {
  const { settings, saveSettings, isMobile } = useSettings();
 
  const handleLanguageChange = (lang) => {
    const updatedSettings = { ...settings, lang };
    saveSettings(updatedSettings);
  };
 
  return (
    <div>
      <p>Current Language: {settings.lang}</p>
      {isMobile && <p>Mobile View</p>}
      <button onClick={() => handleLanguageChange("en")}>
        Switch to English
      </button>
      <button onClick={() => handleLanguageChange("ar")}>
        Switch to Arabic
      </button>
    </div>
  );
}

Conclusion

The Settings Context in the AMRO admin template provides a centralized way to manage global settings and state in your Next.js application. By leveraging this context, you can easily customize and control various aspects of the user interface, ensuring a seamless and responsive user experience.

For more advanced customization and integration options, refer to the documentation and code examples provided in the AMRO admin template repository.