Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@types/react-helmet
Advanced tools
@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.
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>
);
}
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 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.
npm install --save @types/react-helmet
This package contains type definitions for react-helmet (https://github.com/nfl/react-helmet).
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 = React.JSX.IntrinsicElements["html"] & OtherElementAttributes;
type BodyProps = React.JSX.IntrinsicElements["body"] & OtherElementAttributes;
type LinkProps = React.JSX.IntrinsicElements["link"];
type MetaProps = React.JSX.IntrinsicElements["meta"];
export interface HelmetTags {
baseTag: any[];
linkTags: HTMLLinkElement[];
metaTags: HTMLMetaElement[];
noscriptTags: any[];
scriptTags: HTMLScriptElement[];
styleTags: 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?: any[] | undefined;
script?: any[] | undefined;
style?: 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;
These definitions were written by Evan Bremer, Isman Usoh, Yui T., Yamagishi Kazutoshi, and Justin Hall.
FAQs
TypeScript definitions for react-helmet
The npm package @types/react-helmet receives a total of 767,556 weekly downloads. As such, @types/react-helmet popularity was classified as popular.
We found that @types/react-helmet demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.