🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

hoofd

Package Overview
Dependencies
Maintainers
0
Versions
21
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hoofd

Hooks to populate the html head.

1.7.3
latest
Source
npm
Version published
Maintainers
0
Created
Source

Hoofd

npm version Bundle size

This project aims at providing a set of hooks to populate <meta>, ... for each page. With crawlers now supporting client-side alterations it's important to support a fallback model for our <head> tags. The dispatcher located in this library will always make a queue of how we should fallback, ... This way we'll always have some information to give to a visiting crawler.

npm i --save hoofd
## OR
yarn add hoofd

import { useMeta, useLink, useLang, useTitle, useTitleTemplate } from 'hoofd';

const App = () => {
  // Will set <html lang="en">
  useLang('en');

  // Will set title to "Welcome to hoofd | 💭"
  useTitleTemplate('%s | 💭');
  useTitle('Welcome to hoofd');

  useMeta({ name: 'author', content: 'Jovi De Croock' });
  useLink({ rel: 'me', href: 'https://jovidecroock.com' });

  return <p>hoofd</p>;
};

Or you can choose to

import { useHead, useLink } from 'hoofd';

const App = () => {
  useHead({
    title: 'Welcome to hoofd | 💭',
    language: 'en',
    metas: [{ name: 'author', content: 'Jovi De Croock' }],
  });
  useLink({ rel: 'me', href: 'https://jovidecroock.com' });

  return <p>hoofd</p>;
};

Preact

If you need support for Preact you can import from hoofd/preact instead.

Gatsby

There's a plugin that hooks in with Gatsby and that will fill in the meta, ... in your build process.

Hooks

This package exports useTitle, useTitleTemplate, useMeta, useLink and useLang. These hooks are used to control information conveyed by the <head> in an html document.

useTitle

This hook accepts a string that will be used to set the document.title, every time the given string changes it will update the property.

useTitleTemplate

This hook accepts a string, which will be used to format the result of useTitle whenever it updates. Similar to react-helmet, the placeholder %s will be replaced with the title.

useMeta

This hook accepts the regular <meta> properties, being name, property, httpEquiv, charset and content.

These have to be passed as an object and will update when content changes.

useLink

This hook accepts the regular <link> properties, being rel, as, media, href, sizes and crossorigin.

This will update within the same useLink but will never go outside

useLang

This hook accepts a string that will be used to set the lang property on the base <html> tag. Every time this string gets updated this will be reflected in the dom.

useScript

This hook accepts a few arguments and will lead to an injection of a script tag into the dispatcher (during ssr) or the DOM (during csr).

  • src?: this can be a location where the script lives, for example public/x.js or an inline script for example data:application/javascript,alert("yolo").
  • id?: a unique identifier used for querying the script tag. Atleast one among src and id prop is mandatory.
  • text?: this sets the inner text on the script tag. Can be used for adding embedded data, rich text data.
  • type?: this sets the type attribute on the script tag.
  • async?: this sets the async attribute on the script tag.
  • defer?: this sets the defer attribute on the script tag.
  • module?: this property will override the type atrribute on the script tag with a value of module.
  • crossorigin?: 'anonymous' | 'use-credentials';
  • integrity?: string;

SSR

We expose a method called toStatic that will return the following properties:

  • title, the current title dictated by the deepest useTitleTemplate and useTitle combination
  • lang, the current lang dictated by the deepest useLang
  • metas, an array of unique metas by keyword (property, ...)
  • links, the links aggregated from the render pass.

The reason we pass these as properties is to better support gatsby, ...

If you need to stringify these you can use the following algo:

const stringify = (title, metas, links) => {
  const stringifyTag = (tagName, tags) =>
    tags.reduce((acc, tag) => 
      `${acc}<${tagName}${Object.keys(tag).reduce(
        (properties, key) => `${properties} ${key}="${tag[key]}"`,
        ''
      )}>`
    , '');

  return `
    <title>${title}</title>

    ${stringifyTag('meta', metas)}
    ${stringifyTag('link', links)}
  `;
};

import { toStatic } from 'hoofd';

const reactStuff = renderToString();
const { metas, links, title, lang } = toStatic();
const stringified = stringify(title, metas, links);

const html = `
  <!doctype html>
    <html ${lang ? `lang="${lang}"` : ''}>
      <head>
        ${stringified}
      </head>
      <body>
        <div id="content">
          ${reactStuff}
        </div>
      </body>
  </html>
`;

Context API

By default this package relies on a statically-initialized context provider to accumulate and dispatch <head> and <meta> changes. In cases where you may want to control the Dispatcher instance used, this module exports a HoofdProvider context provider and createDispatcher function for creating valid context instances.

import { createDispatcher, HoofdProvider } from 'hoofd';

function ssr(App) {
  const dispatcher = createDispatcher();
  const wrappedApp = (
    <HoofdProvider value={dispatcher}>
      <App />
    </HoofdProvider>
  );
  const markup = renderToString(wrappedApp);
  const { metas, links, title, lang } = dispatcher.toStatic();

  // See example above for potential method to consume these static results.
}

Keywords

hoofd
react
preact
document
head
title

FAQs

Package last updated on 14 Jan 2025

Did you know?

Socket

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.

Install

Related posts

New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025

Security News

New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025

CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.

By Sarah Gooding  -  Jul 07, 2025