Skip to content
SSR-ready Document Head tag management for React 16+
JavaScript CSS
Branch: master
Clone or download
ashfurrow and tizmagik Adds note about headTags prop behaviour (#86)
* Adds note about headTags prop behaviour.

* Update README.md

Co-Authored-By: ashfurrow <ash@ashfurrow.com>
Latest commit 3068c37 Apr 30, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Update Example for v3 API (#60) Aug 20, 2018
src fix(typings): fix type definitions for exported HTML components (#82) Apr 12, 2019
tests Support open graph protocol (#58) Aug 17, 2018
.editorconfig Initial working version Oct 9, 2017
.eslintignore Add flow definitions (#31) Jul 2, 2018
.eslintrc.js Make headTags in <HeadProvider /> optional for client (#50) Aug 13, 2018
.flowconfig Add flow definitions (#31) Jul 2, 2018
.gitignore Bundle cjs and esm with rollup (#22) May 15, 2018
.prettierignore Update tests (#21) May 15, 2018
.size-snapshot.json ssrTags are removed using removeSafe method (#73) Nov 12, 2018
.travis.yml
CONTRIBUTING.md Update CONTRIBUTING.md Oct 10, 2017
LICENSE Initial commit Oct 9, 2017
README.md Adds note about headTags prop behaviour (#86) Apr 29, 2019
babel.config.js Upgrade to babel 7 (#61) Aug 28, 2018
package-lock.json 3.1.1 Apr 12, 2019
package.json
rollup.config.js Make headTags in <HeadProvider /> optional for client (#50) Aug 13, 2018

README.md

react-head npm Version bundlephobia PRs Welcome

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-head

or

yarn add react-head

How it works

  1. You wrap your App with <HeadProvider />
  2. From the server, you pass headTags[] array to <HeadProvider />
  3. Then call renderToStaticMarkup(headTags) and include in the <head /> block of your server template
  4. To insert head tags within your app, just render one of <Title />, <Meta />, <Style /> and <Link /> 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" content="http://jeremygayed.com/" />
      <Meta name="example" content="whatever" />
      // ...
    </div>
  </HeadProvider>
);

Contributing

Please follow the contributing docs

You can’t perform that action at this time.