or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-gatsby-plugin-react-helmet

Gatsby plugin that provides server-side rendering support for React Helmet document head management.

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/gatsby-plugin-react-helmet@6.15.x

To install, run

npx @tessl/cli install tessl/npm-gatsby-plugin-react-helmet@6.15.0

Gatsby Plugin React Helmet

Gatsby Plugin React Helmet provides server-side rendering support for React Helmet in Gatsby applications. This plugin extracts React Helmet data during the build process and injects it into the static HTML pages that Gatsby generates, ensuring proper SEO optimization and social media sharing capabilities.

⚠️ Deprecation Notice: This plugin will be deprecated in favor of Gatsby's built-in Head API. For new projects, consider using the Gatsby Head API with Gatsby v4.19.0+.

Package Information

Package Name: gatsby-plugin-react-helmet
Package Type: npm
Language: JavaScript
Installation: npm install gatsby-plugin-react-helmet react-helmet
Peer Dependencies: gatsby (^5.0.0-next), react-helmet (^5.1.3 || ^6.0.0)

Core Imports

This plugin works through Gatsby's plugin system and does not export functions for direct import. Instead, it automatically integrates with Gatsby's build process when added to your gatsby-config.js file.

Basic Usage

Add the plugin to your Gatsby configuration:

// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet'
  ]
};

Then use React Helmet in your components:

import React from "react";
import { Helmet } from "react-helmet";

function MyPage() {
  return (
    <>
      <Helmet>
        <title>My Page Title</title>
        <meta name="description" content="Page description for SEO" />
        <meta property="og:title" content="My Page Title" />
        <link rel="canonical" href="https://example.com/my-page" />
      </Helmet>
      <h1>My Page Content</h1>
    </>
  );
}

export default MyPage;

Architecture

The plugin operates through Gatsby's plugin hook system, implementing server-side rendering hooks that execute during the build process:

SSR Integration: Uses Gatsby's onRenderBody hook to extract React Helmet data during server-side rendering
Build-time Processing: Processes all React Helmet components across your site during static generation
HTML Injection: Automatically injects extracted metadata into the <head> section of generated HTML pages
Attribute Handling: Supports HTML and body element attributes in addition to head elements

Capabilities

Server-Side Rendering Hook

The plugin implements Gatsby's server-side rendering API to extract and inject React Helmet data.

/**
 * Gatsby SSR API hook that processes React Helmet data during build
 * @param {Object} params - Parameters object
 * @param {Function} params.setHeadComponents - Function to set components in document head
 * @param {Function} params.setHtmlAttributes - Function to set HTML element attributes  
 * @param {Function} params.setBodyAttributes - Function to set body element attributes
 */
function onRenderBody({
  setHeadComponents,
  setHtmlAttributes,
  setBodyAttributes,
});

This hook:

Calls Helmet.renderStatic() to extract all helmet data from React components
Sets HTML element attributes using helmet.htmlAttributes.toComponent()
Sets body element attributes using helmet.bodyAttributes.toComponent()
Extracts and injects head components: title, meta, link, script, style, base, noscript elements
Handles title component placement with special logic for proper ordering

Plugin Options Schema

Defines the configuration schema for the plugin (currently empty).

/**
 * Gatsby Node API hook that defines plugin options schema
 * @param {Object} params - Parameters object
 * @param {Object} params.Joi - Joi validation library from Gatsby
 * @returns {Object} Joi schema object for plugin options validation
 */
function pluginOptionsSchema({ Joi });

Currently returns an empty schema (Joi.object({})) as the plugin requires no configuration options.

Initialization Hook

Displays deprecation warning when the plugin initializes.

/**
 * Gatsby Node API hook that runs before Gatsby initialization
 * @param reporter - Gatsby's reporter API for logging messages
 */
function onPreInit({ reporter }): void;

This hook warns users about the plugin's deprecation and recommends migrating to Gatsby's built-in Head API.

Supported Head Elements

The plugin automatically processes and injects the following React Helmet elements:

Title: <title> elements with proper placement logic
Meta: <meta> tags for SEO, social media, and other metadata
Link: <link> elements for stylesheets, canonical URLs, favicons, etc.
Script: <script> tags for analytics, tracking, and other JavaScript
Style: <style> elements for inline CSS
Base: <base> elements for setting document base URL
Noscript: <noscript> elements for fallback content
HTML Attributes: Attributes on the <html> element (lang, class, etc.)
Body Attributes: Attributes on the <body> element (class, data attributes, etc.)

Special Considerations

React 16.8+ Hook Compatibility

When using React hooks with this plugin, ensure:

You're using the latest version of gatsby-plugin-react-helmet
You're using react-helmet version 6.0.0-beta or later
Import React Helmet using: import { Helmet } from 'react-helmet'

Offline Plugin Compatibility

When using with gatsby-plugin-offline, titles may not appear in background tabs. Work around this by adding defer={false} to your Helmet component:

<Helmet title="Page Title" defer={false} />

Migration Path

For new projects, consider using Gatsby's built-in Head API instead:

import React from "react";
import { Head } from "gatsby";

function MyPage() {
  return (
    <>
      <Head>
        <title>My Page Title</title>
        <meta name="description" content="Page description for SEO" />
      </Head>
      <h1>My Page Content</h1>
    </>
  );
}

export default MyPage;

export function Head() {
  return (
    <>
      <title>My Page Title</title>
      <meta name="description" content="Page description for SEO" />
    </>
  );
}