react-amp-template
AMP react server rendering.
Last updated 6 months ago by arielfdr .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-amp-template 
SYNC missed versions from official npm registry.

RAMPT v4

AMP components aliases and shims for React SSR 16+ & styled-components v3


Build Status npm version

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

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

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.

Current Tags

  • 4.1.0                                ...           latest (6 months ago)
  • 4.1.0-rc.1                                ...           next (a year ago)

23 Versions

  • 4.1.0                                ...           6 months ago
  • 4.0.4                                ...           a year ago
  • 4.1.0-rc.1                                ...           a year ago
  • 4.1.0-rc.0                                ...           a year ago
  • 4.0.3                                ...           a year ago
  • 4.0.2                                ...           a year ago
  • 4.0.0                                ...           2 years ago
  • 4.0.0-alpha.5                                ...           2 years ago
  • 4.0.0-alpha.4                                ...           2 years ago
  • 4.0.0-alpha.3                                ...           2 years ago
  • 4.0.0-alpha.2                                ...           2 years ago
  • 4.0.0-alpha.1                                ...           2 years ago
  • 4.0.0-alpha.0                                ...           2 years ago
  • 3.0.0                                ...           2 years ago
  • 3.0.0-rc0                                ...           2 years ago
  • 2.3.0                                ...           3 years ago
  • 2.2.1                                ...           3 years ago
  • 2.2.0                                ...           3 years ago
  • 2.1.0                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 1.0.0-alpha                                ...           3 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 25
Last Day 0
Last Week 24
Last Month 0
Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |