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
const Title Link Carousel = AMP const Body = styledbody` margin: 0 1rem;` const App = <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>
Demo
API
renderToString
/** * Transform React component into HTML AMP format. * * @returns * @param * @param * @property * @property * @property * @property * @property ** specify custom version for derived extension e.g: 'amp-sticky-ad': '1.0'import { renderToString } from 'react-amp-template'
AMP components
const AdUnit = <AMPAdUnit />
-
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.
LD+JSON
<AMPScript type="application/ld+json" dangerouslySetInnerHTML= __html: 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
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
.