inferno-head
Advanced tools
Readme
Asynchronous SSR-ready Document Head management for React 16+
This module allows you to define document.head tags anywhere in your component hiearchy. The motivations are similar to react-helmet in that you may only have the information for certain tags contextually deep in your component hiearchy. There are no dependencies (it does not use react-side-effects) and it should work fine with asynchronous rendering; the only requirement is React 16+.
Read more about react-head and how it works on Medium
npm i react-head
<HeadCollector /> with a given headTags[] arrayrenderToString(headTags) and include in the <head /> block of your server template<HeadTag /> components as often as needed.On the server, the tags are collected in the headTags[] array, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent pageloads need to change the head tags).
You can view a fully working sample app in the /example folder.
Wrap your app with <HeadCollector /> on the server with a given headTags[] array to pass down as part of your server-rendered payload.
import React from 'react';
import { renderToString } from 'react-dom/server';
import { HeadCollector } from 'react-head';
import App from './App';
// ... within the context of a request ...
const context = {};
const headTags = [];
const app = renderToString(
<HeadCollector headTags={headTags}>
<App />
</HeadCollector>
);
res.send(`
<!doctype html>
<head>
${renderToString(headTags)}
</head>
<body>
<div id="root">${app}</div>
</body>
</html>
`)
There is nothing special required on the client, just render <HeadTag /> components whenever you want to inject a tag in the <head />.
import React from 'react';
import HeadTag from 'react-head';
const App = () => (
<div className="Home">
<HeadTag tag="title">Title of page</HeadTag>
<HeadTag tag="link" rel="canonical" content="http://jeremygayed.com/" />
<HeadTag tag="meta" name="example" content="whatever" />
// ...
</div>
)
The following aliases are also available for use (just convenience components that pre-fill the tag prop in <HeadTag />):
import HeadTag, { Title, Style, Meta, Link } from 'react-head';
Please follow the contributing docs
FAQs
SSR-ready Document Head management for Inferno
We found that inferno-head demonstrated a not healthy version release cadence and project activity because the last version was released 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
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.