react-head
Version:
SSR-ready Document Head management for React 16+
90 lines (62 loc) • 3.08 kB
Markdown
Asynchronous SSR-ready Document Head management for React 16.3+
This module allows you to define `document.head` tags anywhere in your component hiearchy. The motivations are similar to [react-helmet](https://github.com/nfl/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+.
[](https://jeremygayed.com/making-head-tag-management-thread-safe-with-react-head-323654170b45)
```
npm i react-head
```
1. On the server, you wrap your App in `<HeadProvider />` with a given `headTags[]` array
1. Then call `renderToString(headTags)` and include in the `<head />` block of your server template
1. 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](/example) folder.
### Server setup
Wrap your app with `<HeadProvider />` on the server with a given `headTags[]` array to pass down as part of your server-rendered payload.
```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 context = {};
const headTags = [];
const app = renderToString(
<HeadProvider headTags={headTags}>
<App />
</HeadProvider>
);
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 />`.
```js
import * as 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 />`):
```js
import { HeadTag, Title, Style, Meta, Link } from 'react-head';
```
Please follow the [contributing docs](/CONTRIBUTING.md)