// MyComponent.js
import {
  Layout, // Renders the boilerplate & delegates the passed children to Helmet
  Sidebar
} from "react-amp-components";

class MyComponent extends React.Component {
  render() {
    <div>
      <Layout>
        <title>{title}</title>
        <link rel="canonical" href="http://canonical.url" />
        <script type="application/ld+json">{`
          {
            "@context": "http://schema.org",
            "@type": "Product"
          }
        `}</script>
      </Layout>
      <Sidebar id="my-sidebar" layout="hidden">
        <p>Here is some sidebar content</p>
      </Sidebar>
    </div>;
  }
}

Then on the server you generate the final HTML output, and the content for the head:

// Server.js
const React = require("react");
const ReactDOMServer = require("react-dom/server");
const { Helmet } = require("react-amp-components");

const MyComponent = require("./MyComponent.js");

const content = ReactDOMServer.renderToStaticMarkup(
  React.createElement(MyComponent)
);
const meta = Helmet.renderStaticClean();

Which you can then interpolate:

const finalHTML = `
  <!doctype html>
  <html ${meta.htmlAttributes}>
    <head>
      ${meta.title}
      ${meta.meta}
      ${meta.link}
      ${meta.script}
      ${meta.noscript}
      ${meta.style}
    </head>
    <body ${meta.bodyAttributes}>
      ${content}
    </body>
  </html>
`;

AMP Components implemented

amp-ad

Example usage:

<InstallServiceworker
  src="https://www.your-domain.com/serviceworker.js"
  dataIframeSrc="https://www.your-domain.com/install-serviceworker.html"
/>

Props:

src (required)
dataIframeSrc (optional)
dataNoServiceWorkerFallbackUrlMatch (optional)
dataNoServiceWorkerFallbackShellUrl (optional)

Todo

Define all the AMP components with their properties and scripts in a JSON file and use that to generate them.
Rename Layout to Helmet
Provide helper finalHTML renderer

FAQs

What is react-amp-components?

Is react-amp-components well maintained?

Package last updated on 12 Feb 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-amp-components