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 thelogo
componentnavbar
: 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.mdx
page 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:
💡