\n {/* highlight-start */}\n \n Welcome to my website\n
\n {/* highlight-start */}\n
\n );\n};\n"})}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"siteConfig"})," object only contains ",(0,i.jsx)(n.strong,{children:"serializable values"})," (values that are preserved after ",(0,i.jsx)(n.code,{children:"JSON.stringify()"}),"). Functions, regexes, etc. would be lost on the client side."]})}),"\n",(0,i.jsx)(n.h3,{id:"useIsBrowser",children:(0,i.jsx)(n.code,{children:"useIsBrowser"})}),"\n",(0,i.jsxs)(n.p,{children:["Returns ",(0,i.jsx)(n.code,{children:"true"})," when the React app has successfully hydrated in the browser."]}),"\n",(0,i.jsxs)(n.admonition,{type:"warning",children:[(0,i.jsxs)(n.p,{children:["Use this hook instead of ",(0,i.jsx)(n.code,{children:"typeof windows !== 'undefined'"})," in React rendering logic."]}),(0,i.jsxs)(n.p,{children:["The first client-side render output (in the browser) ",(0,i.jsx)(n.strong,{children:"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 ",(0,i.jsx)(n.a,{href:"https://www.joshwcomeau.com/react/the-perils-of-rehydration/",children:"The Perils of Rehydration"}),"."]})]}),"\n",(0,i.jsx)(n.p,{children:"Usage example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport useIsBrowser from '@docusaurus/useIsBrowser';\n\nconst MyComponent = () => {\n // highlight-start\n const isBrowser = useIsBrowser();\n // highlight-end\n return {siteConfig.title}
\n{siteMetadata.siteVersion}
\n {siteMetadata.docusaurusVersion}
\n {/* highlight-end */}\n {isBrowser ? 'Client' : 'Server'}
;\n};\n"})}),"\n",(0,i.jsx)(n.h3,{id:"useBaseUrl",children:(0,i.jsx)(n.code,{children:"useBaseUrl"})}),"\n",(0,i.jsxs)(n.p,{children:["React hook to prepend your site ",(0,i.jsx)(n.code,{children:"baseUrl"})," to a string."]}),"\n",(0,i.jsxs)(n.admonition,{type:"warning",children:[(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Don't use it for regular links!"})}),(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"/baseUrl/"})," prefix is automatically added to all ",(0,i.jsx)(n.strong,{children:"absolute paths"})," by default:"]}),(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Markdown: ",(0,i.jsx)(n.code,{children:"[link](/my/path)"})," will link to ",(0,i.jsx)(n.code,{children:"/baseUrl/my/path"})]}),"\n",(0,i.jsxs)(n.li,{children:["React: ",(0,i.jsx)(n.code,{children:'link'})," will link to ",(0,i.jsx)(n.code,{children:"/baseUrl/my/path"})]}),"\n"]})]}),"\n",(0,i.jsx)(n.h4,{id:"options",children:"Options"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type BaseUrlOptions = {\n forcePrependBaseUrl: boolean;\n absolute: boolean;\n};\n"})}),"\n",(0,i.jsx)(n.h4,{id:"example-usage",children:"Example usage:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport useBaseUrl from '@docusaurus/useBaseUrl';\n\nconst SomeImage = () => {\n // highlight-start\n const imgSrc = useBaseUrl('/img/myImage.png');\n // highlight-end\n return .default})
\n"})})]}),"\n",(0,i.jsx)(n.h3,{id:"useBaseUrlUtils",children:(0,i.jsx)(n.code,{children:"useBaseUrlUtils"})}),"\n",(0,i.jsxs)(n.p,{children:["Sometimes ",(0,i.jsx)(n.code,{children:"useBaseUrl"})," is not good enough. This hook return additional utils related to your site's base URL."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"withBaseUrl"}),": useful if you need to add base URLs to multiple URLs at once."]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport {useBaseUrlUtils} from '@docusaurus/useBaseUrl';\n\nconst Component = () => {\n const urls = ['/a', '/b'];\n // highlight-start\n const {withBaseUrl} = useBaseUrlUtils();\n const urlsWithBaseUrl = urls.map(withBaseUrl);\n // highlight-end\n return {/* ... */}
;\n};\n"})}),"\n",(0,i.jsx)(n.h3,{id:"useGlobalData",children:(0,i.jsx)(n.code,{children:"useGlobalData"})}),"\n",(0,i.jsx)(n.p,{children:"React hook to access Docusaurus global data created by all the plugins."}),"\n",(0,i.jsx)(n.p,{children:"Global data is namespaced by plugin name then by plugin ID."}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsx)(n.p,{children:"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."})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'type GlobalData = Record<\n PluginName,\n Record<\n PluginId, // "default" by default\n any // plugin-specific data\n >\n>;\n'})}),"\n",(0,i.jsx)(n.p,{children:"Usage example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\n// highlight-next-line\nimport useGlobalData from '@docusaurus/useGlobalData';\n\nconst MyComponent = () => {\n // highlight-start\n const globalData = useGlobalData();\n const myPluginData = globalData['my-plugin']['default'];\n return {myPluginData.someAttribute}
;\n // highlight-end\n};\n"})}),"\n",(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsxs)(n.p,{children:["Inspect your site's global data at ",(0,i.jsx)(n.code,{children:".docusaurus/globalData.json"})]})}),"\n",(0,i.jsx)(n.h3,{id:"usePluginData",children:(0,i.jsx)(n.code,{children:"usePluginData"})}),"\n",(0,i.jsx)(n.p,{children:"Access global data created by a specific plugin instance."}),"\n",(0,i.jsx)(n.p,{children:"This is the most convenient hook to access plugin global data and should be used most of the time."}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"pluginId"})," is optional if you don't use multi-instance plugins."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"function usePluginData(\n pluginName: string,\n pluginId?: string,\n options?: {failfast?: boolean},\n);\n"})}),"\n",(0,i.jsx)(n.p,{children:"Usage example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\n// highlight-next-line\nimport {usePluginData} from '@docusaurus/useGlobalData';\n\nconst MyComponent = () => {\n // highlight-start\n const myPluginData = usePluginData('my-plugin');\n return {myPluginData.someAttribute}
;\n // highlight-end\n};\n"})}),"\n",(0,i.jsx)(n.h3,{id:"useAllPluginInstancesData",children:(0,i.jsx)(n.code,{children:"useAllPluginInstancesData"})}),"\n",(0,i.jsx)(n.p,{children:"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."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"function useAllPluginInstancesData(\n pluginName: string,\n options?: {failfast?: boolean},\n);\n"})}),"\n",(0,i.jsx)(n.p,{children:"Usage example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\n// highlight-next-line\nimport {useAllPluginInstancesData} from '@docusaurus/useGlobalData';\n\nconst MyComponent = () => {\n // highlight-start\n const allPluginInstancesData = useAllPluginInstancesData('my-plugin');\n const myPluginData = allPluginInstancesData['default'];\n return {myPluginData.someAttribute}
;\n // highlight-end\n};\n"})}),"\n",(0,i.jsx)(n.h3,{id:"useBrokenLinks",children:(0,i.jsx)(n.code,{children:"useBrokenLinks"})}),"\n",(0,i.jsx)(n.p,{children:"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."}),"\n",(0,i.jsxs)(n.admonition,{type:"warning",children:[(0,i.jsxs)(n.p,{children:["This is an ",(0,i.jsx)(n.strong,{children:"advanced"})," API that ",(0,i.jsx)(n.strong,{children:"most Docusaurus users don't need to use directly"}),"."]}),(0,i.jsxs)(n.p,{children:["It is already ",(0,i.jsx)(n.strong,{children:"built-in"})," in existing high-level components:"]}),(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["the ",(0,i.jsx)(n.a,{href:"#link",children:(0,i.jsx)(n.code,{children:""})})," component will collect links for you"]}),"\n",(0,i.jsxs)(n.li,{children:["the ",(0,i.jsx)(n.code,{children:"@theme/Heading"})," (used for Markdown headings) will collect anchors"]}),"\n"]}),(0,i.jsxs)(n.p,{children:["Use ",(0,i.jsx)(n.code,{children:"useBrokenLinks()"})," if you implement your own ",(0,i.jsx)(n.code,{children:"