sample code for meta manager mixin for reactjs

metamanager.js

'use strict';

// data structure that is in the props
// head = {
//   title: 'title'
//   description: 'description'
//   canonical: 'http://www.whatever.com'
//   link: [
//     {
//       href: "https://www.nextpage.com",
//       rel: "next"
//     }
//   ]
//   meta: [
//     {
//       content: "@site",
//       type: "name",
//       value: "twitter:site"
//     },
//     {
//     content: "640",
//     type: "property",
//     value: "og:video:width" 
//     }
//   ]
// }

module.exports = {

  componentDidMount: function () {

    this.updateTitle();
    this.updateDescription();
    this.updateCanonical();
    this.updateTags();
    this.updateLinks();

    //this is only needed here and not props, since component doesn't unmount when its the same
    //type
    this.updatePageClass();

  },

  componentWillUnmount: function () {

    this.removePageClass();

  },

  componentWillReceiveProps: function (nextProps) {

    this.updateTitle(nextProps);
    this.updateDescription(nextProps);
    this.updateCanonical(nextProps);
    this.updateTags();
    this.updateLinks();

  },

  getHead: function (nextProps) {

    var head;

    if (nextProps) {
      head = nextProps.state.data.head;
    } else {
      head = this.props.state.data.head;
    }

    return head;

  },

  updateTitle: function (nextProps) {

    var head = this.getHead(nextProps);

    document.title = head.title ? head.title + ' | Tastemade' : '';

  },

  updateDescription: function (nextProps) {

    var head = this.getHead(nextProps);

    var description = document.querySelector('meta[name="description"]');

    description.setAttribute('content', head.description ? head.description : '');

  },

  updateCanonical: function (nextProps) {

    var head = this.getHead(nextProps);

    var canonical = document.querySelector('link[rel="canonical"]');

    canonical.setAttribute('href', head.canonical ? head.canonical : '');

  },

  updatePageClass: function () {

    var html = document.getElementsByTagName('html')[0];

    var data = this.props.state.data;

    var pageClass = data.pageClass;

    if (pageClass) {
      html.classList.add(pageClass);
    }

  },

  removePageClass: function () {

    var html = document.getElementsByTagName('html')[0];

    var data = this.props.state.data;

    var pageClass = data.pageClass;

    html.classList.remove(pageClass);

  },

  removeNodes: function (nodeList) {

    var head = document.getElementsByTagName('head')[0];

    for (var i = 0, l = nodeList.length; i < l; i++) {
      var node = nodeList[i];
      head.removeChild(node);
    }

  },

  addTags: function (nextProps) {

    var head = this.getHead(nextProps);
    var headNode = document.getElementsByTagName('head')[0];
    var tag;

    if (head.meta) {
      for (var i = 0, l = head.meta.length; i < l; i++) {
        tag = document.createElement('meta');
        tag.setAttribute(head.meta[i].type, head.meta[i].value);
        tag.setAttribute('content', head.meta[i].content);

        headNode.appendChild(tag);
      }
    }

  },

  addLinks: function (nextProps) {

    var head = this.getHead(nextProps);
    var headNode = document.getElementsByTagName('head')[0];
    var link;

    if (head.link) {
      for (var i = 0, l = head.link.length; i < l; i++) {
        link = document.createElement('link');
        link.setAttribute('rel', head.link[i].rel);
        link.setAttribute('href', head.link[i].href);

        headNode.appendChild(link);
      }
    }

  },

  updateTags: function (nextProps) {

    var tags = document.querySelectorAll('meta[name^=twitter], meta[property^=og], meta[property^=al]');

    this.removeNodes(tags);

    this.addTags(nextProps);

  },

  updateLinks: function (nextProps) {

    var tags = document.querySelectorAll('link[rel^=next], link[rel^=prev]');

    this.removeNodes(tags);

    this.addLinks(nextProps);

  }

};