{/* highlight-start */}
Welcome to my website
{/* highlight-end */}
{/* highlight-start */}
);
};
```
:::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` {#useIsBrowser}
Returns `true` when the React app has successfully hydrated in the browser.
:::caution
Use this hook instead of `typeof windows !== 'undefined'` in React rendering logic.
The first client-side render output (in the browser) **must be exactly the same** as the server-side render output (Node.js). Not following this rule can lead to unexpected hydration behaviors, as described in [The Perils of Rehydration](https://www.joshwcomeau.com/react/the-perils-of-rehydration/).
:::
Usage example:
```jsx
import React from 'react';
import useIsBrowser from '@docusaurus/useIsBrowser';
const MyComponent = () => {
// highlight-start
const isBrowser = useIsBrowser();
// highlight-end
return {siteConfig.title}
{siteMetadata.siteVersion}
{siteMetadata.docusaurusVersion}
{/* highlight-end */}
{isBrowser ? 'Client' : 'Server'}
;
};
```
#### A caveat to know when using `useIsBrowser`
Because it does not do `typeof windows !== 'undefined'` check but rather checks if the React app has successfully hydrated, the following code will not work as intended:
```jsx
import React from 'react';
import useIsBrowser from '@docusaurus/useIsBrowser';
const MyComponent = () => {
// highlight-start
const isBrowser = useIsBrowser();
const url = isBrowser ? new URL(window.location.href) : undefined;
const someQueryParam = url?.searchParams.get('someParam');
const [someParam, setSomeParam] = useState(someQueryParam || 'fallbackValue');
// renders fallbackValue instead of the value of someParam query parameter
// because the component has already rendered but hydration has not completed
// useState references the fallbackValue
return {someParam};
// highlight-end
};
```
Adding `useIsBrowser()` checks to derived values will have no effect. Wrapping the `` with `.default})
```
:::
### `useBaseUrlUtils` {#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
import React from 'react';
import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
const Component = () => {
const urls = ['/a', '/b'];
// highlight-start
const {withBaseUrl} = useBaseUrlUtils();
const urlsWithBaseUrl = urls.map(withBaseUrl);
// highlight-end
return {/* ... */}
;
};
```
### `useGlobalData` {#useGlobalData}
React hook to access Docusaurus global data created by all the plugins.
Global data is namespaced by plugin name then by plugin ID.
:::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
import React from 'react';
// highlight-next-line
import useGlobalData from '@docusaurus/useGlobalData';
const MyComponent = () => {
// highlight-start
const globalData = useGlobalData();
const myPluginData = globalData['my-plugin']['default'];
return {myPluginData.someAttribute}
;
// highlight-end
};
```
:::tip
Inspect your site's global data at `./docusaurus/globalData.json`
:::
### `usePluginData` {#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
import React from 'react';
// highlight-next-line
import {usePluginData} from '@docusaurus/useGlobalData';
const MyComponent = () => {
// highlight-start
const myPluginData = usePluginData('my-plugin');
return {myPluginData.someAttribute}
;
// highlight-end
};
```
### `useAllPluginInstancesData` {#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
import React from 'react';
// highlight-next-line
import {useAllPluginInstancesData} from '@docusaurus/useGlobalData';
const MyComponent = () => {
// highlight-start
const allPluginInstancesData = useAllPluginInstancesData('my-plugin');
const myPluginData = allPluginInstancesData['default'];
return {myPluginData.someAttribute}
;
// highlight-end
};
```
## Functions {#functions}
### `interpolate` {#interpolate-1}
The imperative counterpart of the [`