React Helmet


Advanced management of document head's elements (, , ,

{/ noscript elements /}


{/ inline style elements /}


`

$3

[HelmetDataContext]: #helmetdatacontext

The [HelmetDataContext] (it may be initialized as just an empty object) can be
provided to [HelmetProvider] for server-side rendering (SSR) purposes. After
the component tree has been rendered, the helmet field will be attached to
this context:
`tsx
type HelmetDataContext = {
helmet?: {
base: HelmetDatum;
bodyAttributes: HelmetDatum;
htmlAttributes: HelmetDatum;
link: HelmetDatum;
meta: HelmetDatum;
noscript: HelmetDatum;
script: HelmetDatum;
style: HelmetDatum;
title: HelmetDatum;
titleAttributes?: HelmetDatum;
priority: HelmetDatum;
};
};

// where each HelmetDatum has two methods allowing to get string and component
// representations of the corresponding elements or attrbiutes:
type HelmetDatum = {
toString(): string;
toComponent(): ReactNode;
};
`

$3

[HelmetProvider]: #helmetprovider

The [HelmetProvider] component provides [React Context] to [Helmet]
components, _i.e._ any [Helmet] components in the application tree must be
descendants of a single [HelmetProvider] instance.

Props
- children — ReactNode — The component tree to render in
the place of [HelmetProvider].
- context — [HelmetDataContext] | undefined — Optional.
A user-provided context object for server-side rendering (SSR) purposes.

$3


[MetaTags]: #metatags
The [MetaTags] component is a helper for easier rendering of page title,
description, and misc meta tags for search engines and social graphs (_i.e._ for
previews of linked pages in social media, messengers, _etc._). Based on provided
properties it uses [Helmet] to render:
-

);
`
As this example demonstrates, [MetaTags] must not be wrapped into [Helmet],
as it will render its instance itself, but the same as [Helmet] components,
all [MetaTags] instances should be descendants of [HelmetProvider] within
the application component tree.

Multiple [MetaTags] within the application tree override the tags they manage
according to the usual [Helmet] logic.

Required Properties:

- description — string — Page description to use in
the _description_ meta tag, and as the default description in [Open Graph]
and [Twitter (X) Cards].

- title — string — The page name to use in the