react-declarative-head
v1.0.5
Published
Head side effects handled with a declarative component
Downloads
18
Maintainers
josepapaianniReadme
React Declarative Head
React component to handle <head> side effects on client and server side.
Inspired in React Side Effect.
Installation
npm install react-declarative-head --saveUse Cases
- Keep
<head>stuff in your app structure - Add/remove
<head>tags along your application
Usage
import React, { Component } from 'react';
import Head from 'react-declarative-head';
const Foo = props =>
<div>
<Head>
<title>A New Hello World!</title>
<link rel="preconnect" href="https://www.to.a.new.preconnect.com/" />
</Head>
</div>
const MyApp = props =>
<div>
<Head>
<title>Hello World!</title>
<link rel="preconnect" href="https://www.google.com/" />
</Head>
<Foo />
</div>
On the server you can call Head.rewind() to get the current state as a HTML string to inject in your response.
app.get('*', (req, res) => {
const app = ReactDOMServer.renderToString(
<MyApp />
);
res.send(`<!DOCTYPE><html>
<head>${Head.rewind()}</head>
<body><div id="app-root">${app}</div>
<script src="myapp-bundle.js"></script>
</body></html>`)
});If you are server rendering and forget to call Head.rewind() after renderToString() you'll get a memory leak.