Skip to content

Ariel-Rodriguez/react-amp-template

Repository files navigation

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!

Contents

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 }]
  ]
}

Contributing

  • Fork the repository
  • npm install
  • npm run dev
  • Create pull request

Build examples

  • cd examples/simple-server
  • npm install && npm start

License

This project is licensed under the Apache License, Version 2.0. Copyright (c) 2016 Ariel Fernando Rodriguez. For more information see LICENSE.md.