Security News
Opengrep Adds Apex Support and New Rule Controls in Latest Updates
The latest Opengrep releases add Apex scanning, precision rule tuning, and performance gains for open source static code analysis.
By Sarah Gooding - Aug 12, 2025
Hoofd
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.jsor an inline script for exampledata:application/javascript,alert("yolo"). - id?: a unique identifier used for querying the script tag. Atleast one among
srcandidprop is mandatory. - text?: this sets the inner
texton the script tag. Can be used for adding embedded data, rich text data. - type?: this sets the
typeattribute on the script tag. - async?: this sets the
asyncattribute on the script tag. - defer?: this sets the
deferattribute on the script tag. - module?: this property will override the
typeatrribute on the script tag with a value ofmodule. - crossorigin?: 'anonymous' | 'use-credentials';
- integrity?: string;
SSR
We expose a method called toStatic that will return the following properties:
- title, the current
titledictated by the deepestuseTitleTemplateanduseTitlecombination - lang, the current
langdictated by the deepestuseLang - 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.
}
1.7.3
Patch Changes
- Correct the type path for the
hoofd/preactpackage Submitted by @barelyhuman (See #106)
FAQs
Hooks to populate the html head.
The npm package hoofd receives a total of 928 weekly downloads. As such, hoofd popularity was classified as not popular.
We found that hoofd 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.
Package last updated on 14 Jan 2025
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.
Related posts
Security News
npm Adopts OIDC for Trusted Publishing in CI/CD Workflows
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
By Sarah Gooding - Aug 08, 2025
Research
/Security News
60 Malicious Ruby Gems Used in Targeted Credential Theft Campaign
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
By Kirill Boychenko - Aug 07, 2025