Proxy pattern for transforming props passed to react-document-meta

document-meta-proxy.js

import React from "react";
import DocumentMeta from "react-document-meta";

const applyTransforms = ({ title, ...props }) => ({ ...props, title: `${title} - suffix` });

export default const ProxyComponent = (props) => <DocumentMeta {...applyTransforms(props)} extend />;

root-component.js

import React from "react";
import DocumentMeta from "react-document-meta";
import SubComponent from "sub-component";

const defaultMetas = {
  title: "Beep boop",
  description: "I'm a default value"
};

export default const RootComponent = (props) => (
  <div>
    <DocumentMeta {...defaultMetas}/>
    <SubComponent />
  </div>
);

sub-component.js

import React from "react";
import DocumentMeta from "document-meta-proxy";

export default const SubComponent = (props) => (
  <div>
    <DocumentMeta title="Hello world!" />
    <h1>Hello world!
  </div>
);

RootComponent has the proper react-document-meta component. Setting default values for properties on it ensures everything that should have a value will have value. SubComponents use the document-meta-proxy that mutates it's props and returns a react-document-meta components.

Not sure how universally this can be applied, but for us it works well. Also it was an easy patch, since all I had to do was to change the import source in my sub components.