Naughty Programmer's Madness

    react-head
    TypeScript icon, indicating that this package has built-in type declarations

    3.4.0 • Public • Published

    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 />, <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" content="http://jeremygayed.com/" />
          <Meta name="example" content="whatever" />
          // ...
        </div>
      </HeadProvider>
    );

    Contributing

    Please follow the contributing docs

    Install

    npm i react-head

    DownloadsWeekly Downloads

    6,904

    Version

    3.4.0

    License

    MIT

    Unpacked Size

    38.2 kB

    Total Files

    15

    Last publish

    Collaborators

    • tizmagik