❤
npm
Sign UpSign In

react-declarative-head

1.0.5 • Public • Published

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

Use 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.

Readme

Keywords

Package Sidebar

Install

npm i react-declarative-head

Repository

github.com/josepapaianni/react-declarative-head

Homepage

github.com/josepapaianni/react-declarative-head#readme

Weekly Downloads

2

Version

1.0.5

License

ISC

Last publish

Collaborators

  • josepapaianni
Try on RunKit
Report malware