SSR-ready Document Head management for React 16+
npm install react-headAsynchronous SSR-ready Document Head management for React 16.3+
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
``sh`
npm i react-head
or
`sh`
yarn add react-head
1. You wrap your App with
1. From the server, you pass array to
1. Then call and include in the
block of your server template
1. To insert head tags within your app, just render one of , , , , and 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.
$3
Wrap your app with
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.`js
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(
);
res.send(
);
`$3
There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the
.`js
import * as React from 'react';
import { HeadProvider, Title, Link, Meta } from 'react-head';const App = () => (
Title of page
// ...
);
``Please follow the contributing docs