What is @types/react-helmet?
@types/react-helmet provides TypeScript definitions for the react-helmet library, which is used to manage changes to the document head in a React application. This includes setting the title, meta tags, and other head elements dynamically.
What are @types/react-helmet's main functionalities?
Setting the Document Title
This feature allows you to set the document title dynamically within a React component.
import { Helmet } from 'react-helmet';
function MyComponent() {
return (
<div>
<Helmet>
<title>My Page Title</title>
</Helmet>
<h1>Welcome to My Page</h1>
</div>
);
}
Adding Meta Tags
This feature allows you to add meta tags to the document head dynamically within a React component.
import { Helmet } from 'react-helmet';
function MyComponent() {
return (
<div>
<Helmet>
<meta charSet="utf-8" />
<meta name="description" content="My page description" />
</Helmet>
<h1>Welcome to My Page</h1>
</div>
);
}
Link Tags
This feature allows you to add link tags, such as canonical links, to the document head dynamically within a React component.
import { Helmet } from 'react-helmet';
function MyComponent() {
return (
<div>
<Helmet>
<link rel="canonical" href="https://www.example.com/my-page" />
</Helmet>
<h1>Welcome to My Page</h1>
</div>
);
}
Other packages similar to @types/react-helmet
react-helmet-async
react-helmet-async is a drop-in replacement for react-helmet that supports asynchronous rendering. It is useful for server-side rendering (SSR) and provides a similar API to react-helmet.
react-meta-tags
react-meta-tags is another library for managing the document head in React applications. It provides a similar API to react-helmet but focuses on simplicity and ease of use.
Installation
npm install --save @types/react-helmet
Summary
This package contains type definitions for react-helmet (https://github.com/nfl/react-helmet).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-helmet/v5.
import * as React from "react";
interface OtherElementAttributes {
[key: string]: string | number | boolean | null | undefined;
}
type HtmlProps = JSX.IntrinsicElements["html"] & OtherElementAttributes;
type BodyProps = JSX.IntrinsicElements["body"] & OtherElementAttributes;
type LinkProps = JSX.IntrinsicElements["link"];
type MetaProps = JSX.IntrinsicElements["meta"];
export interface HelmetTags {
baseTag: Array<any>;
linkTags: Array<HTMLLinkElement>;
metaTags: Array<HTMLMetaElement>;
noscriptTags: Array<any>;
scriptTags: Array<HTMLScriptElement>;
styleTags: Array<HTMLStyleElement>;
}
export interface HelmetProps {
async?: boolean | undefined;
base?: any;
bodyAttributes?: BodyProps | undefined;
children?: React.ReactNode;
defaultTitle?: string | undefined;
defer?: boolean | undefined;
encodeSpecialCharacters?: boolean | undefined;
htmlAttributes?: HtmlProps | undefined;
onChangeClientState?: ((newState: any, addedTags: HelmetTags, removedTags: HelmetTags) => void) | undefined;
link?: LinkProps[] | undefined;
meta?: MetaProps[] | undefined;
noscript?: Array<any> | undefined;
script?: Array<any> | undefined;
style?: Array<any> | undefined;
title?: string | undefined;
titleAttributes?: Object | undefined;
titleTemplate?: string | undefined;
}
export class Helmet extends React.Component<HelmetProps> {
static peek(): HelmetData;
static rewind(): HelmetData;
static renderStatic(): HelmetData;
static canUseDOM: boolean;
}
export interface HelmetData {
base: HelmetDatum;
bodyAttributes: HelmetHTMLBodyDatum;
htmlAttributes: HelmetHTMLElementDatum;
link: HelmetDatum;
meta: HelmetDatum;
noscript: HelmetDatum;
script: HelmetDatum;
style: HelmetDatum;
title: HelmetDatum;
titleAttributes: HelmetDatum;
}
export interface HelmetDatum {
toString(): string;
toComponent(): React.ReactElement;
}
export interface HelmetHTMLBodyDatum {
toString(): string;
toComponent(): React.HTMLAttributes<HTMLBodyElement>;
}
export interface HelmetHTMLElementDatum {
toString(): string;
toComponent(): React.HTMLAttributes<HTMLHtmlElement>;
}
export const peek: () => HelmetData;
export const rewind: () => HelmetData;
export const renderStatic: () => HelmetData;
export const canUseDOM: boolean;
export default Helmet;
Additional Details
- Last updated: Wed, 18 Oct 2023 11:45:05 GMT
- Dependencies: @types/react
Credits
These definitions were written by Evan Bremer, Isman Usoh, Yui T., Yamagishi Kazutoshi, and Justin Hall.