Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ariel-rodriguez/react-amp-template
AMP template generator
https://github.com/ariel-rodriguez/react-amp-template
amp amp-html aphrodite javascript-library preact react styled-components
Last synced: 12 days ago
JSON representation
AMP template generator
- Host: GitHub
- URL: https://github.com/ariel-rodriguez/react-amp-template
- Owner: Ariel-Rodriguez
- License: other
- Created: 2016-11-25T00:41:15.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T01:44:29.000Z (almost 2 years ago)
- Last Synced: 2024-10-07T23:48:23.597Z (about 1 month ago)
- Topics: amp, amp-html, aphrodite, javascript-library, preact, react, styled-components
- Language: JavaScript
- Size: 6.76 MB
- Stars: 83
- Watchers: 10
- Forks: 16
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this 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](#usage)
- [Demo](#demo)
- [API](#api)
- [Configuration](#configuration)
- [Contribute](#contributing)
## Usage
### Install
- `npm i react-amp-template`
### Static Render
```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 }) => (
{title}
Hello World
)
export default props => renderToString()
```
## Demo
[See complete example here](https://github.com/Ariel-Rodriguez/react-amp-template/tree/master/examples/simple-server)
## API
### renderToString
```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 `` tag required by AMP.
- The following components could be used in case of need to ad elements into `` element
```javascript
```
- By default every amp-script address to version 0.1. However it can be customized.
```javascript
renderToString(, {
extensions: {
default: 0.2,
'amp-sticky-unit': 1.0,
}
})
```
#### LD+JSON
```javascript
```
## 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`
```json
{
"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`.