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!
npm i react-amp-template
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" />)/**
* 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'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,
}
})<AMP.Script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }}
/>- Setup the environment as recomends React and Styled-Components server rendering.
npm i -D babel-plugin-styled-components babel-preset-react
{
"presets": [
"stage-0",
"react"
],
"plugins": [
["babel-plugin-styled-components", { "ssr": true }]
]
}- Fork the repository
npm installnpm run dev- Create pull request
cd examples/simple-servernpm install && npm start
This project is licensed under the Apache License, Version 2.0. Copyright (c) 2016 Ariel Fernando Rodriguez. For more information see LICENSE.md.
