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/v4.
import * as React from "react";
declare class ReactHelmet extends React.Component<ReactHelmet.HelmetProps> {}
declare namespace ReactHelmet {
function peek(): ReactHelmet.HelmetData;
function rewind(): ReactHelmet.HelmetData;
interface HelmetProps {
base?: any;
defaultTitle?: string | undefined;
htmlAttributes?: any;
link?: Array<any> | undefined;
meta?: Array<any> | undefined;
script?: Array<any> | undefined;
style?: Array<any> | undefined;
title?: string | undefined;
titleTemplate?: string | undefined;
onChangeClientState?: ((newState: any) => void) | undefined;
}
interface HelmetData {
base: HelmetDatum;
htmlAttributes: HelmetDatum;
link: HelmetDatum;
meta: HelmetDatum;
script: HelmetDatum;
style: HelmetDatum;
title: HelmetDatum;
}
interface HelmetDatum {
toString(): string;
toComponent(): React.ReactElement;
}
}
export = ReactHelmet;
Additional Details
- Last updated: Sat, 02 Oct 2021 07:01:17 GMT
- Dependencies: @types/react
- Global values: none
Credits
These definitions were written by Evan Bremer, and Isman Usoh.