amp-react-components

amp-react-components

Render AMP components with React.

1. Support styled-components by passed-in className prop.
2. Attaches className prop to class prop of AMP elements for supporting HTML class attribute. Now React does't support custom element attributes, so the <amp-img className="img" /> will be rendered as <amp-img classname="img" />
3. Render script tag with type=application/json to support AMP components, such as amp-animation and amp-bind

Installation

npm i amp-react-components

Usage

• Common jS

// import from package entry point
const amp = require('amp-react-components')

  <amp.AmpImg {...props} />
  <amp.AmpLightbox {...props} />

// only import specific component
const AmpLightbox = require('amp-react-components/lib/components/AmpLightbox')

  <AmpLightbox {...props} />

• ESM

// import from package entry point
import { AmpImg, AmpLightbox } from 'amp-react-components'

  <AmpImg {...props} />
  <AmpLightbox {...props} />

// only import specific component
import AspectRatioImg from 'amp-react-components/es/components/AmpLightbox'

  <AmpLightbox {...props} />

Example

• CSS Module

// style.css
.img {
  position: relative;
  border-radius: 8px;
  border: solid 1px #e0e4e9;
  box-sizing: border-box;

  > img {
    border-radius: 8px;
  }
}

// index.js
import { AmpImg } from 'amp-react-components'
import styles from './style.css'

function Compoment({...}) {
  return (
    <AmpImg
      className ={styles.img}
      src={image}
      width="1"
      height="1"
      layout="responsive"
    />
  )
}

• Styled Components

import styled from 'styled-components'
import { AmpImg } from 'amp-react-components'

const StyledAmpImg = styled(AmpImg)`
  position: relative;
  border-radius: 8px;
  border: solid 1px #e0e4e9;
  box-sizing: border-box;

  > img {
    border-radius: 8px;
  }
`
function Compoment({...}) {
  return (
    <StyledAmpImg
      src={image}
      width="1"
      height="1"
      layout="responsive"
    />
  )
}

• AMP Component (AmpState) with Script Tag

import { AmpImg, AmpState } from 'amp-react-components'


function Compoment({...}) {
  const id = "myAnimals"
  const state = {
    "dog": {
      "imageUrl": "/img/dog.jpg",
      "style": "greenBackground"
    },
    "cat": {
      "imageUrl": "/img/cat.jpg",
      "style": "redBackground"
    }
  }

  return (
    <>
      <AmpState id={id} state={state} />
      <p data-amp-bind-text="'This is a ' + currentAnimal + '.'">This is a dog.</p>
      <p class="greenBackground" data-amp-bind-class="myAnimals[currentAnimal].style">
        Each animal has a different background color.
      </p>
      <AmpImg width="300" height="200" src="/img/dog.jpg" data-amp-bind-src="myAnimals[currentAnimal].imageUrl" />
      <button on="tap:AMP.setState({currentAnimal: 'cat'})">Set to Cat</button>
    </>
  )
}

• AMP.setState

import { ampSetState } from 'amp-react-components/utils'

function Button(){
  const state = {
    foo: 'bar'
  }
  return (
    <button 
      on=`tap:${ampSetState(state)}`
    >
      click me
    </button>
  )
}

Changelog

<small>1.5.5 (2019-11-01)</small>

• fix: move amp-analytics from view to utils (0247a85)
• fix: update index.js for AmpAnalytics (9ccc404)