Docusaurus useThemeConfig: Access and Modify Theme Configuration in React

Docusaurus useThemeConfig: Access and Modify Theme Configuration in React

'useThemeConfig' is a React Hook provided by Docusaurus that offers access and control over the current theme configuration. You can leverage it within any component to fetch or adjust the configuration of your active theme.

To use 'useThemeConfig', begin by installing and importing the theme configuration object. For example:

import { useThemeConfig } from '@docusaurus/theme-common';
import themeConfig from '@theme/themeConfig';

Subsequently, utilize 'useThemeConfig' within your components:

function MyComponent() {
  const { navbar: { title }, footer: { links } } = useThemeConfig();
  return (
    <div>
      <h1>{title}</h1>
      <ul>
        {links.map((link) => (
          <li key={link.label}>
            <a href={link.href}>{link.label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

In this illustration, we utilize 'useThemeConfig' to retrieve the 'navbar.title' and 'footer.links' properties from the current theme. These values can be employed in any component to personalize the component's appearance and functionality based on your theme configuration.

Furthermore, 'useThemeConfig' provides a 'setConfig' method that enables you to modify the active theme's configuration:

function MyComponent() {
  const { setConfig } = useThemeConfig();
  const handleClick = () => {
    setConfig({ navbar: { title: 'New Title' } });
  };
  return (
    <div>
      <button onClick={handleClick}>Change Title</button>
    </div>
  );
}

In this example, the 'setConfig' method is used to alter the 'navbar.title' of the current theme. This method allows for dynamic theme configuration changes within components, enabling customized theme behaviors.