Skip to content

Instantly share code, notes, and snippets.

@nikcorg
Last active April 16, 2016 09:03
Show Gist options
  • Save nikcorg/310fa528150082f1a3d9cfba8feaa8b0 to your computer and use it in GitHub Desktop.
Save nikcorg/310fa528150082f1a3d9cfba8feaa8b0 to your computer and use it in GitHub Desktop.
Proxy pattern for transforming props passed to react-document-meta
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 />;
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>
);
import React from "react";
import DocumentMeta from "document-meta-proxy";
export default const SubComponent = (props) => (
<div>
<DocumentMeta title="Hello world!" />
<h1>Hello world!
</div>
);
@nikcorg
Copy link
Author

nikcorg commented Apr 16, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment