Package Exports

react-amp-template

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-amp-template) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

RAMPT v4

AMP components aliases and shims for React SSR 16+ & styled-components v3

Write AMP pages using React syntaxt right the way and style with your preferred style manager

⚡ AMP elements: Ready to render any AMP component
💅 Modular CSS: Style with the power of Styled Components or Aphrodite or Your Own custom StyleManager!

Usage
Demo
API
Configuration
Contribute

Usage

Install

npm i react-amp-template

Static Render

import React, { Fragment } from 'react'
import styled from 'styled-components'
import { renderToString, AMP } from 'react-amp-template'

const { Title, Link, Carousel } = AMP

const Body = styled.body`
  margin: 0 1rem;
`

const App = ({ title }) => (
  <Fragment>
    <Title>{title}</Title>
    <Link rel="canonical" href="http://localhost" />
    <Body>
      <h1>Hello World</h1>
      <Carousel lightbox width="400" height="300" layout="responsive" type="slides">
        <amp-img src="/img/image1.jpg" width="400" height="300" layout="responsive"></amp-img>
        <amp-img src="/img/image2.jpg" width="400" height="300" layout="responsive"></amp-img>
        <amp-img src="/img/image3.jpg" width="400" height="300" layout="responsive"></amp-img>
      </Carousel>
    </Body>
  </Fragment>
)

export default props => renderToString(<App title="AMP demo" />)

Demo

See complete example here

API

renderToString

/**
 * Transform React component into HTML AMP format.
 *
 * @returns {String} html
 * @param {Class|Object} body React component to render
 * @param {Object} options Settings
 * @property {string} options.cdnURI absolute URL to AMP CDN
 * @property {string} options.boilerplate HTML string which contains AMP boilerplate styles
 * @property {object} options.extensions Key map of references to specify an extension version
 * @property {object} options.extensions.default default version for all amp-extensions e.g '0.1'
 * @property {object} options.extensions.extension [extension-name]
 ** specify custom version for derived extension e.g: 'amp-sticky-ad': '1.0'
import { renderToString } from 'react-amp-template'

AMP components

import { AMP } from 'react-amp-template'

const AdUnit = () => <AMP.AdUnit />

RAMPT provides shorthands for amp-custom-elements. A [ get ] operation on { AMP } module returns Node element and automatically registers the <script /> tag required by AMP.
The following components could be used in case of need to ad elements into <head> element

  <Link /> <Meta /> <Title /> <Script /> <Tag _name="custom-tag" />

By default every amp-script address to version 0.1. However it can be customized.

renderToString(<App />, {
  extensions: {
   default: 0.2,
   'amp-sticky-unit': 1.0,
  }
})

LD+JSON

<AMP.Script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }}
/>

Configuration

Babel

Setup the environment as recomends React and Styled-Components server rendering.

React | Styled Components

npm i -D babel-plugin-styled-components babel-preset-react

{
  "presets": [
    "stage-0",
    "react"
  ],
  "plugins": [
    ["babel-plugin-styled-components", { "ssr": true }]
  ]
}

JSPM

react-amp-template