npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

inferno-head

2.1.0 • Public • Published

react-head npm Version PRs Welcome

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

  1. On the server, you wrap your App in <HeadCollector /> with a given headTags[] array
  2. Then call renderToString(headTags) and include in the <head /> block of your server template
  3. 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.

import React from 'react';
import { renderToString } from 'react-dom/server';
import { HeadCollector } from 'react-head';
import App from './App';
 
// ... within the context of a request ...
 
const context = {};
const headTags = [];
const app = renderToString(
  <HeadCollector headTags={headTags}>
    <App />
  </HeadCollector>
);
 
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 <HeadTag /> components whenever you want to inject a tag in the <head />.

import 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>
)

Usage

The following aliases are also available for use (just convenience components that pre-fill the tag prop in <HeadTag />):

import HeadTag, { Title, Style, Meta, Link } from 'react-head';

Contributing

Please follow the contributing docs

install

npm i inferno-head

Downloadsweekly downloads

8

version

2.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability