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

:zap: AMP elements

Ready to render any AMP component

:nail_care: Modular CSS

Style with the power of Styled Components or Aphrodite or Your Own custom StyleManager!

Contents

- Usage
- Demo
- API
- Configuration
- Contribute

Usage

$3

- npm i react-amp-template

$3

``javascript
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 }) => (






Hello World

export default props => renderToString()
`

Demo

`javascript
/**
* 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

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

const AdUnit = () =>
`
- RAMPT provides shorthands for amp-custom-elements. A \[ get \] operation on { AMP } module returns Node element and automatically registers the