react-head
v3.4.2
Published
SSR-ready Document Head management for React 16+
Downloads
36,071
Maintainers
tizmagikReadme
react-head 
Asynchronous SSR-ready Document Head management for React 16.3+
Motivation
This module allows you to define document.head tags anywhere in your component hierarchy. 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.3+.
Read more about react-head and how it works on Medium
Installation
npm i react-heador
yarn add react-headHow it works
- You wrap your App with
<HeadProvider /> - From the server, you pass
headTags[]array to<HeadProvider /> - Then call
renderToStaticMarkup(headTags)and include in the<head />block of your server template - To insert head tags within your app, just render one of
<Title />,<Meta />,<Style />,<Link />, and<Base />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 page loads need to change the head tags).
You can view a fully working sample app in the /example folder.
Server setup
Wrap your app with <HeadProvider /> on the server, using a headTags[] array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags.
import * as React from 'react';
import { renderToString } from 'react-dom/server';
import { HeadProvider } from 'react-head';
import App from './App';
// ... within the context of a request ...
const headTags = []; // mutated during render so you can include in server-rendered template later
const app = renderToString(
<HeadProvider headTags={headTags}>
<App />
</HeadProvider>
);
res.send(`
<!doctype html>
<head>
${renderToString(headTags)}
</head>
<body>
<div id="root">${app}</div>
</body>
</html>
`);Client setup
There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the <head />.
import * as React from 'react';
import { HeadProvider, Title, Link, Meta } from 'react-head';
const App = () => (
<HeadProvider>
<div className="Home">
<Title>Title of page</Title>
<Link rel="canonical" href="http://jeremygayed.com/" />
<Meta name="example" content="whatever" />
// ...
</div>
</HeadProvider>
);Contributing
Please follow the contributing docs