-
-
Notifications
You must be signed in to change notification settings - Fork 933
/
use-page-metadata.ts
46 lines (44 loc) · 1.34 KB
/
use-page-metadata.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { BreadcrumbValue } from '@vendure/admin-ui/core';
import { useContext } from 'react';
import { HostedComponentContext } from '../directives/react-component-host.directive';
import { HostedReactComponentContext, ReactRouteComponentOptions } from '../types';
/**
* @description
* Provides functions for setting the current page title and breadcrumb.
*
* @example
* ```ts
* import { usePageMetadata } from '\@vendure/admin-ui/react';
* import { useEffect } from 'react';
*
* export const MyComponent = () => {
* const { setTitle, setBreadcrumb } = usePageMetadata();
* useEffect(() => {
* setTitle('My Page');
* setBreadcrumb([
* { link: ['./parent'], label: 'Parent Page' },
* { link: ['./'], label: 'This Page' },
* ]);
* }, []);
* // ...
* return <div>...</div>;
* }
* ```
*
* @docsCategory react-hooks
*/
export function usePageMetadata() {
const context = useContext(
HostedComponentContext,
) as HostedReactComponentContext<ReactRouteComponentOptions>;
const setBreadcrumb = (newValue: BreadcrumbValue) => {
context.pageMetadataService?.setBreadcrumbs(newValue);
};
const setTitle = (newTitle: string) => {
context.pageMetadataService?.setTitle(newTitle);
};
return {
setBreadcrumb,
setTitle,
};
}