HelmetWrapper example

Component.jsx

//Usage: title, desc 
<HelmetWrapper info={{title: "", desc: "", img: "",}} />

helmet.js

//Title
const title = "Site Title";
const description = "Best description ever.";
//...
{
  meta: [
    {charset: "utf-8"},
    {"http-equiv": "X-UA-Compatible", "content": "IE=edge"},
    {name: "description", content: description"},
    {name: "viewport", content: "width=device-width, initial-scale=1"},

    {name: "twitter:card", content: "summary"},
    {name: "twitter:site", content: "@sitehandle"},
    {name: "twitter:creator", content: "@companyhandle"},

    {property: "og:type", content: "article"},
    {property: "og:site_name", content: title},

    {name: "mobile-web-app-capable", content: "yes"},
    {name: "apple-mobile-web-app-capable", content: "yes"},
    {name: "apple-mobile-web-app-title", content: title},

    /* Chrome, Firefox OS and Opera*/
    {name: "theme-color", content: "#212831"},

    /* Windows Phone*/
    {name: "msapplication-navbutton-color", content: "#212831"},

    /* iOS Safari*/
    {name: "apple-mobile-web-app-status-bar-style", content: "#212831"}
 ]
}

HelmetWrapper.jsx

import React, {Component} from "react";
import {Helmet} from "react-helmet-async";
import {withNamespaces} from "react-i18next";
import {connect} from "react-redux";

Helmet.defaultProps.encodeSpecialCharacters = false;

class HelmetWrapper extends Component {

  render() {
    const {t, info, lang, baseUrl, path} = this.props;

    const defaults = {
      title: info && info.title ? info.title : t("Share.Title"),
      desc: info && info.desc ? info.desc : t("Share.Description"),
      img: info && info.img ? info.img : `${baseUrl}/images/share/${lang}.jpg`,
      url: `${baseUrl}${path}`,
      locale: lang
    };

    return (
      <Helmet title={defaults.title}>

        <meta name="title" content={`${defaults.title} | OEC`} />
        <meta name="description" content={defaults.desc} />

        <meta name="twitter:title" content={`${defaults.title} | OEC`} />
        <meta name="twitter:description" content={defaults.desc} />
        <meta name="twitter:image" content={defaults.img} />

        <meta property="og:title" content={`${defaults.title} | OEC`} />
        <meta property="og:description" content={defaults.desc} />
        <meta property="og:locale" content={defaults.locale} />
        <meta property="og:url" content={defaults.url} />
        <meta property="og:image" content={defaults.img} />

      </Helmet>
    );
  }
}

export default withNamespaces()(
  connect(state => ({
    baseUrl: state.env.CANON_API,
    lang: state.i18n.locale === "en" ? "en" : "es",
    path: state.location.pathname
  }))(HelmetWrapper)
);