Docusaurus provides some APIs on the clients that can be helpful to you when building your site.
This reusable React component will manage all of your changes to the document head. It takes plain HTML tags and outputs plain HTML tags and is beginner-friendly. It is a wrapper around React Helmet.
Nested or latter components will override duplicate usages:
This component enables linking to internal pages as well as a powerful performance feature called preloading. Preloading is used to prefetch resources so that the resources are fetched by the time the user navigates with this component. We use an
IntersectionObserver to fetch a low-priority request when the
<Link> is in the viewport and then use an
onMouseOver event to trigger a high-priority request when it is likely that a user will navigate to the requested resource.
The component is a wrapper around react-router’s
<Link> component that adds useful enhancements specific to Docusaurus. All props are passed through to react-router’s
The target location to navigate to. Example:
<Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do. You can refer to React Router's Redirect documentation for more info on available props.
@docusaurus/router implements React Router and supports its features.
<BrowserOnly> component accepts a
children prop, a render function which will not be executed during the pre-rendering phase of the build process. This is useful for hiding code that is only meant to run in the browsers (e.g. where the
document objects are being accessed). To improve SEO, you can also provide fallback content using the
fallback prop, which will be prerendered until in the build process and replaced with the client-side only contents when viewed in the browser.
React hook to access Docusaurus Context. Context contains
siteConfig object from docusaurus.config.js, and some additional site metadata.
React hook to automatically prepend
baseUrl to a string automatically. This is particularly useful if you don't want to hardcode your config's
baseUrl. We highly recommend you to use this.
useBaseUrl is not good enough. This hook return additional utils related to your site's base url.
withBaseUrl: useful if you need to add base urls to multiple urls at once
React hook to access Docusaurus global data created by all the plugins.
Global data is namespaced by plugin name, and plugin id.
Plugin id is only useful when a plugin is used multiple times on the same site. Each plugin instance is able to create its own global data.
Inspect your site's global data at
usePluginData(pluginName: string, pluginId?: string)
Access global data created by a specific plugin instance.
This is the most convenient hook to access plugin global data, and should be used most of the time.
pluginId is optional if you don't use multi-instance plugins.
Access global data created by a specific plugin. Given a plugin name, it returns the data of all the plugins instances of that name, by pluginId.
A module which exposes a few boolean variables to check the current rendering environment. Useful if you want to only run certain code on client/server or need to write server-side rendering compatible code.