Merge pull request #13 from americanexpress/feature/pass-through-helm…

…et-props feat(props): allow overrides for Helmet props
americanexpress · May 18, 2020 · 650897a · 650897a
2 parents 8503653 + fedc464
commit 650897a
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 0 deletions.
diff --git a/__tests__/__snapshots__/index.spec.jsx.snap b/__tests__/__snapshots__/index.spec.jsx.snap
@@ -1,5 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SEO should render Helmet props correctly 1`] = `
+<Helmet
+  defaultTitle="Curabitur pretium tincidunt lacus."
+  defer={false}
+  encodeSpecialCharacters={true}
+  htmlAttributes={
+    Object {
+      "lang": "en-US",
+    }
+  }
+  link={
+    Array [
+      Object {
+        "href": "https://example.com/foo/bar",
+        "rel": "canonical",
+      },
+    ]
+  }
+  meta={
+    Array [
+      Object {
+        "content": "Lorem ipsum sat delor.",
+        "name": "description",
+      },
+      Object {
+        "content": "foo,bar",
+        "name": "keywords",
+      },
+      Object {
+        "content": "Lorem Ipsum",
+        "property": "og:title",
+      },
+      Object {
+        "content": "Lorem ipsum sat delor.",
+        "property": "og:description",
+      },
+      Object {
+        "content": "website",
+        "property": "og:type",
+      },
+      Object {
+        "content": "John Doe",
+        "name": "twitter:creator",
+      },
+      Object {
+        "content": "Lorem Ipsum",
+        "name": "twitter:title",
+      },
+      Object {
+        "content": "Lorem ipsum sat delor.",
+        "name": "twitter:description",
+      },
+      Object {
+        "content": "summary",
+        "name": "twitter:card",
+      },
+    ]
+  }
+  onChangeClientState={[MockFunction]}
+  titleTemplate={null}
+/>
+`;
+
 exports[`SEO should render articles correctly 1`] = `
 <Helmet
   htmlAttributes={

diff --git a/__tests__/index.spec.jsx b/__tests__/index.spec.jsx
@@ -92,4 +92,24 @@ describe('SEO', () => {
     );
     expect(component).toMatchSnapshot();
   });
+
+  it('should render Helmet props correctly', () => {
+    const component = shallow(
+      <SEO
+        author="John Doe"
+        description="Lorem ipsum sat delor."
+        keywords={['foo', 'bar']}
+        siteUrl="https://example.com"
+        title="Lorem Ipsum"
+        canonical="https://example.com/foo/bar"
+        defaultTitle="Curabitur pretium tincidunt lacus."
+        defer={false}
+        encodeSpecialCharacters={true}
+        onChangeClientState={jest.fn()}
+        titleTemplate={null}
+        zipTies={false}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/index.jsx b/src/index.jsx
@@ -15,6 +15,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { HELMET_PROPS } from 'react-helmet/lib/HelmetConstants';
 
 const SEO = ({
   article,
@@ -29,6 +30,7 @@ const SEO = ({
   siteUrl,
   title,
   canonical: canonicalTag,
+  ...props
 }) => {
   const image = metaImage && metaImage.src ? `${siteUrl}${metaImage.src}` : null;
 
@@ -102,11 +104,20 @@ const SEO = ({
     ];
   }
 
+  const helmetProps = Object.values(HELMET_PROPS)
+    .filter((propName) => props[propName] !== undefined)
+    .reduce((result, propName) => ({
+      ...result,
+      [propName]: props[propName],
+    }), {});
+
   return (
     <Helmet
       htmlAttributes={{ lang }}
       link={link}
       meta={metaTags}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...helmetProps}
     >
       {children}
     </Helmet>