react-ampify

A collection of utility functions for developing AMP page with React.js.:wrench::zap:

Quick Start

Installation

npm i -S react-ampify react

Note: React@^16.1.1 is the peer dependency of react-ampify

Usage

const { createJsonScriptElement } = require('react-ampify')

const TestComponent = () => {
  const json = {
    id: 'test',
    name: 'this is a test'
  }
  return (
    <div>
      { createJsonScriptElement(json) }
    </div>
  )
}

/*
will render:
<div>
  <script type="application/json">
    {
      "id": "test",
      "name": "this is a test"
    }
  </script>
</div>
*/ 

Functions

createJsonScriptElement(json)

Inline script element can't be created by using jsx syntax (security concern). This function help you to inject json into script element

withBindingAttrs(element, attrs)

The syntax of binding attribute of AMP can't be used directly in jsx way. For example: React will complain if you create element like this:

<input [value]='state.value' />

This function help to append binding attributes to React element.

License

react-ampify is MIT Licenced