React Amp Template Save
AMP template generator
Project 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
- :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
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
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.
Open Source Agenda is not affiliated with "React Amp Template" Project. README Source: Ariel-Rodriguez/react-amp-template
Stars
83
Open Issues
6
Last Commit
1 year ago
Repository
Open Source Agenda Badge
