react-amp-template

v4.1.0

Published

2 years ago

AMP react server rendering.

Downloads

140

0High
0Medium
0Low

alexrqs

arielfdr

preact react amp server-rendering react-amp amp-react template aphrodite styledcomponent

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Contents