react-head 
Asynchronous SSR-ready Document Head management for React 16+
Motivation
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
Installation
npm i react-head
How it works
- On the server, you wrap your App in
<HeadCollector />with a givenheadTags[]array - Then call
renderToString(headTags)and include in the<head />block of your server template - To insert head tags within your app, just render
<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.
Server setup
Wrap your app with <HeadCollector /> on the server with a given headTags[] array to pass down as part of your server-rendered payload.
;;;; // ... within the context of a request ... const context = {};const headTags = ;const app = ; resClient setup
There is nothing special required on the client, just render <HeadTag /> components whenever you want to inject a tag in the <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>Usage
The following aliases are also available for use (just convenience components that pre-fill the tag prop in <HeadTag />):
;Contributing
Please follow the contributing docs