amp-react-components

amp-react-components

Render AMP components with React.

1. Support styled-components by passed-in className prop, and attaches className prop to class prop of AMP HTML tag duo to React does't support custom element attributes now.
2. Render script tag with JSON object inside to support 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>
    </>
  )
}

Changelog

1.2.0 (2019-10-14)

• ci: update rollup condif (e41bcae)
• feat: saperate components directory (4d2aba6)
• docs: update github action link (5c9ce76)
• docs: update readme heading (3f07e33)