useConfig
The useConfig hook is made to dynamically configure your project. See Theme Configuration for more information about each customizable feature.
useConfig hook
⚠️
The useConfig hook is made to dynamically configure your project. See
Theme Configuration (opens in a new tab) for more
information about each customizable feature.
The useConfig (opens in a new tab) hook returns data from your theme configuration and current page context.
Return Values
banner: data about Banner (opens in a new tab)chat: data about Chat Link (opens in a new tab)darkMode: a boolean whether the theme is dark or notdirection: a string that defines the current writing direction (opens in a new tab)docsRepositoryBase: a link string to the documentation repositoryeditLink: data about Edit Link (opens in a new tab)feedback: data about Feedback Link (opens in a new tab)footer: data about Footer (opens in a new tab)gitTimestamp: a function that renders the Last Updated Date (opens in a new tab)head: an equivalent to Next.js Head tag (opens in a new tab)i18n: data about Internationalization (opens in a new tab)logo: a React component for the website's logologoLink: a link for thelogocomponentnavbar: components related to Navbar (opens in a new tab)navigation: options about Navigation (opens in a new tab)themeSwitch: data about Theme Switch (opens in a new tab)nextThemes: data about theme configuration (see pacocoursey/next-themes (opens in a new tab))notFound: data to display when the page is not foundprimaryHue: data about Theme Color (opens in a new tab)primarySaturation: data about Theme Color (opens in a new tab)project: data about Project Link (opens in a new tab)search: data about Search (opens in a new tab)serverSideError: data to display when a server-side error happens (requires500.mdxpage too)sidebar: data about Sidebar (opens in a new tab)toc: data about Table of Contents Sidebar (opens in a new tab)useNextSeoOptions: a function that passes data to Next.js SEO component. (see SEO Options (opens in a new tab))flexsearch: data about search configurationtitle: Title about current documentfrontMatter: parsed front matter (opens in a new tab) data
Signature
The function is in file /packages/nextra-theme-docs/src/contexts/config.tsx (opens in a new tab) and this is the code:
export function useConfig<FrontMatterType = FrontMatter>() {
return useContext<Config<FrontMatterType>>(ConfigContext)
}Example
The following code:
import { useConfig } from 'nextra-theme-docs'
export const logo = () => {
return useConfig().logo
}
- {logo()}produces:
💡