{/* highlight-start */}
Welcome to my website
{/* highlight-end */}
{/* highlight-start */}
);
};
```
:::callout{intent="note"}
The `siteConfig` object only contains **serializable values** (values that are preserved after `JSON.stringify()`). Functions, regexes, etc. would be lost on the client side.
:::
### `useIsBrowser`
Returns `true` after initial hydration completes in the browser.
:::callout{intent="warning"}
Use this hook instead of `typeof window !== 'undefined'` in React rendering logic.
The initial render output must be consistent between server and client — components should not depend on browser-only state during the initial render. See [The Perils of Rehydration](https://www.joshwcomeau.com/react/the-perils-of-rehydration/).
`useIsBrowser()` and `typeof window !== 'undefined'` serve different purposes:
- **`useIsBrowser()`** — tracks hydration state. Use it to gate UI behavior that should only activate after initial hydration.
- **`typeof window !== 'undefined'`** — detects the runtime environment. Use it when you need to check DOM availability outside of React rendering logic.
| Context | `useIsBrowser()` | `typeof window !== 'undefined'` |
| ---------------------------- | ---------------- | ------------------------------- |
| Node.js / SSR | `false` | `false` |
| During initial client render | `false` | `true` (DOM is available) |
| After initial hydration | `true` | `true` |
:::
Usage example:
```jsx
import React from 'react';
import useIsBrowser from '@docusaurus/useIsBrowser';
const MyComponent = () => {
const isBrowser = useIsBrowser();
return {siteConfig.title}
{siteMetadata.siteVersion}
{siteMetadata.docusaurusVersion}
{/* highlight-end */}
{isBrowser ? 'Browser' : 'Server'}
;
};
```
### `useBaseUrl`
React hook to prepend your site `baseUrl` to a string.
:::callout{intent="warning"}
**Don't use it for regular links!**
The `/baseUrl/` prefix is automatically added to all **absolute paths** by default:
- Markdown: `[link](/my/path)` will link to `/baseUrl/my/path`
- React: `link` will link to `/baseUrl/my/path`
:::
#### Options
```ts
type BaseUrlOptions = {
forcePrependBaseUrl: boolean;
absolute: boolean;
};
```
#### Example usage:
```jsx {5}
import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';
const SomeImage = () => {
const imgSrc = useBaseUrl('/img/myImage.png');
return .default})
```
:::
### `useBaseUrlUtils`
Sometimes `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.
```jsx {6-7}
import React from 'react';
import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
const Component = () => {
const urls = ['/a', '/b'];
const {withBaseUrl} = useBaseUrlUtils();
const urlsWithBaseUrl = urls.map(withBaseUrl);
return {/* ... */}
;
};
```
### `useGlobalData`
React hook to access Docusaurus global data created by all the plugins.
Global data is namespaced by plugin name then by plugin ID.
:::callout{intent="info"}
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.
:::
```ts
type GlobalData = Record<
PluginName,
Record<
PluginId, // "default" by default
any // plugin-specific data
>
>;
```
Usage example:
```jsx {2,5-7}
import React from 'react';
import useGlobalData from '@docusaurus/useGlobalData';
const MyComponent = () => {
const globalData = useGlobalData();
const myPluginData = globalData['my-plugin']['default'];
return {myPluginData.someAttribute}
;
};
```
:::callout{intent="tip"}
Inspect your site's global data at `.docusaurus/globalData.json`
:::
### `usePluginData`
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.
```ts
function usePluginData(
pluginName: string,
pluginId?: string,
options?: {failfast?: boolean},
);
```
Usage example:
```jsx {2,5-6}
import React from 'react';
import {usePluginData} from '@docusaurus/useGlobalData';
const MyComponent = () => {
const myPluginData = usePluginData('my-plugin');
return {myPluginData.someAttribute}
;
};
```
### `useAllPluginInstancesData`
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 plugin id.
```ts
function useAllPluginInstancesData(
pluginName: string,
options?: {failfast?: boolean},
);
```
Usage example:
```jsx {2,5-7}
import React from 'react';
import {useAllPluginInstancesData} from '@docusaurus/useGlobalData';
const MyComponent = () => {
const allPluginInstancesData = useAllPluginInstancesData('my-plugin');
const myPluginData = allPluginInstancesData['default'];
return {myPluginData.someAttribute}
;
};
```
### `useBrokenLinks`
React hook to access the Docusaurus broken link checker APIs, exposing a way for a Docusaurus pages to report and collect their links and anchors.
:::callout{intent="warning"}
This is an **advanced** API that **most Docusaurus users don't need to use directly**.
It is already **built-in** in existing high-level components:
- the [``](#link) component will collect links for you
- the `@theme/Heading` (used for Markdown headings) will collect anchors
Use `useBrokenLinks()` if you implement your own `