ratson/react-head-tags

ReactDOMServer.renderToNodeStream() ready component to manage document.head

react-head-tags

ReactDOMServer.renderToNodeStream() ready component to manage document.head

Installation

npm install react-head-tags --save

Usage

import React from 'react'
import { renderToNodeStream } from 'react-dom/server'
import { HeadManager, HeadTags } from 'react-head-tags'

let headTags
const contentStream = renderToNodeStream(
  <HeadManager
    onHeadTagsChange={tags => {
      headTags = tags
    }}
  >
    <HeadTags>
      <title>Title</title>
      <meta name="description" content="testing" />
    </HeadTags>
  </HeadManager>,
)

Note that head tags are not collected before the app is rendered, e.g. headTags is undefined until contentStream is finished in the above example.

react-head-tags's Issues

SSR example

Hi, thanks for the library!

I tried to use it with SSR renderToNodeStream function, but it doesn't work as expected. I got html without tags and they coming only after client render.

As far as I know, until we call stream.pipe(res, { end: false }) nothing is rendered, so no meta info is received. But when we start piping, we cant modify head. Is that correct?

In tests, I see, that you use streamToPromise. Why? Is it required, so HeadManager would be able to collect all tags?

How does this differ from react-helmet-async?

Where is this mains.js file in repo?

in file src/server.js
line4: const ssr = require("./ssr/mains.js");

I could not find this file (mains.js) in repo (master branch). Could not understand how it is working?