3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-28 22:18:44 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs(v2): update Client API docs page (#3835)

Browse source 
* docs(V2): update Client API docs page

* apply review suggestion, fix useGlobalData example
This commit is contained in:
Bartosz Kaszubowski 2020-11-30 14:39:51 +01:00 • committed by GitHub
parent 8f47babb46
commit e864aa02aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

69
website/docs/docusaurus-core.md
View file

@ -14,19 +14,17 @@ This reusable React component will manage all of your changes to the document he
Usage Example: Usage Example:
```jsx {2,6,11} ```jsx {2,5,10}
import React from 'react'; import React from 'react';
import Head from '@docusaurus/Head'; import Head from '@docusaurus/Head';
const MySEO = () => ( const MySEO = () => (
<> <Head>
<Head> <meta property="og:description" content="My custom description" />
<meta property="og:description" content="My custom description" /> <meta charSet="utf-8" />
<meta charSet="utf-8" /> <title>My Title</title>
<title>My Title</title> <link rel="canonical" href="http://mysite.com/example" />
<link rel="canonical" href="http://mysite.com/example" /> </Head>
</Head>
</>
); );
``` ```
@ -38,7 +36,6 @@ Nested or latter components will override duplicate usages:
<title>My Title</title> <title>My Title</title>
<meta name="description" content="Helmet application" /> <meta name="description" content="Helmet application" />
</Head> </Head>
<Child> <Child>
<Head> <Head>
<title>Nested Title</title> <title>Nested Title</title>
@ -48,7 +45,7 @@ Nested or latter components will override duplicate usages:
</Parent> </Parent>
``` ```
Outputs Outputs:
```html ```html
<head> <head>
@ -98,9 +95,9 @@ Example usage:
import React from 'react'; import React from 'react';
import {Redirect} from '@docusaurus/router'; import {Redirect} from '@docusaurus/router';
function Home() { const Home = () => {
return <Redirect to="/docs/test" />; return <Redirect to="/docs/test" />;
} };
``` ```
:::note :::note
@ -113,10 +110,10 @@ function Home() {
The `<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 `window`/`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. The `<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 `window`/`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.
```jsx ```jsx {1,5-10}
import BrowserOnly from '@docusaurus/BrowserOnly'; import BrowserOnly from '@docusaurus/BrowserOnly';
function MyComponent() { const MyComponent = () => {
return ( return (
<BrowserOnly <BrowserOnly
fallback={<div>The fallback content to display on prerendering</div>}> fallback={<div>The fallback content to display on prerendering</div>}>
@ -125,7 +122,7 @@ function MyComponent() {
}} }}
</BrowserOnly> </BrowserOnly>
); );
} };
``` ```
## Hooks ## Hooks
@ -155,7 +152,7 @@ interface DocusaurusContext {
Usage example: Usage example:
```jsx {5,8,9} ```jsx {5,8-10}
import React from 'react'; import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -189,7 +186,7 @@ import React from 'react';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
function Help() { const Help = () => {
return ( return (
<div className="col"> <div className="col">
<h2>Browse the docs</h2> <h2>Browse the docs</h2>
@ -199,7 +196,7 @@ function Help() {
</p> </p>
</div> </div>
); );
} };
``` ```
### `useBaseUrlUtils` ### `useBaseUrlUtils`
@ -208,19 +205,19 @@ Sometimes `useBaseUrl` is not good enough. This hook return additional utils rel
- `withBaseUrl`: useful if you need to add base urls to multiple urls at once - `withBaseUrl`: useful if you need to add base urls to multiple urls at once
```jsx {2,5,6,7} ```jsx {2,5-7}
import React from 'react'; import React from 'react';
import {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
function Component() { const Component = () => {
const urls = ['/a', '/b']; const urls = ['/a', '/b'];
const {withBaseUrl} = useBaseUrlUtils(); const {withBaseUrl} = useBaseUrlUtils();
const urlsWithBaseUrl = urls.map(withBaseUrl); const urlsWithBaseUrl = urls.map(withBaseUrl);
return <div className="col">{/* ... */}</div>; return <div className="col">{/* ... */}</div>;
} };
``` ```
### `useGlobalData()` ### `useGlobalData`
React hook to access Docusaurus global data created by all the plugins. React hook to access Docusaurus global data created by all the plugins.
@ -244,12 +241,12 @@ type GlobalData = Record<
Usage example: Usage example:
```jsx {2,5,6,7} ```jsx {2,5-7}
import React from 'react'; import React from 'react';
import useGlobalData from '@docusaurus/useGlobalData'; import useGlobalData from '@docusaurus/useGlobalData';
const MyComponent = () => { const MyComponent = () => {
const globalData = useDocusaurusContext(); const globalData = useGlobalData();
const myPluginData = globalData['my-plugin']['default']; const myPluginData = globalData['my-plugin']['default'];
return <div>{myPluginData.someAttribute}</div>; return <div>{myPluginData.someAttribute}</div>;
}; };
@ -261,7 +258,7 @@ Inspect your site's global data at `./docusaurus/globalData.json`
::: :::
### `usePluginData(pluginName: string, pluginId?: string)` ### `usePluginData`
Access global data created by a specific plugin instance. Access global data created by a specific plugin instance.
@ -269,9 +266,13 @@ This is the most convenient hook to access plugin global data, and should be use
`pluginId` is optional if you don't use multi-instance plugins. `pluginId` is optional if you don't use multi-instance plugins.
```ts
usePluginData(pluginName: string, pluginId?: string)
```
Usage example: Usage example:
```jsx {2,5,6} ```jsx {2,5-6}
import React from 'react'; import React from 'react';
import {usePluginData} from '@docusaurus/useGlobalData'; import {usePluginData} from '@docusaurus/useGlobalData';
@ -281,13 +282,17 @@ const MyComponent = () => {
}; };
``` ```
### `useAllPluginInstancesData(pluginName: string)` ### `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. 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
useAllPluginInstancesData(pluginName: string)
```
Usage example: Usage example:
```jsx {2,5,6,7} ```jsx {2,5-7}
import React from 'react'; import React from 'react';
import {useAllPluginInstancesData} from '@docusaurus/useGlobalData'; import {useAllPluginInstancesData} from '@docusaurus/useGlobalData';
@ -304,14 +309,14 @@ const MyComponent = () => {
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. 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.
```jsx {2} ```jsx {2,5}
import React from 'react'; import React from 'react';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
function MyPage() { const MyPage = () => {
const location = ExecutionEnvironment.canUseDOM ? window.location.href : null; const location = ExecutionEnvironment.canUseDOM ? window.location.href : null;
return <div>{location}</div>; return <div>{location}</div>;
} };
``` ```
| Field | Description | | Field | Description |