react-amphtml
Use amphtml components inside your React apps easily!
Usage
import * as Amp from 'react-amphtml';
import * as AmpHelpers from 'react-amphtml/helpers';
import { AmpScripts, AmpScriptsManager, headerBoilerplate } from 'react-amphtml/setup';Amp
An object containing React components that correspond to all built-ins and
extensions of amphtml.
The properties of this object are the names of each built-in or extension of
amphtml.
Amp.ComponentName([props][, context])
Amp components will accept any props given to them. If AmpScriptsManager is
passing an instance of AmpScripts through context, these components will add
the appropriate <script /> tag to it.
Overrides
Some of the components of the Amp object are overridden to provide more
ergonomics to using them in React.
Amp.AmpState(props, context)
amp-state, a component included in the amp-bind component script, requires
a single <script type="application/json" /> element, with JSON as a child or,
a src to load. In React, adding a <script /> requires using
dangerouslySetInnerHTML, so to make this a little more ergonomic
Amp.AmpState does the heavy lifting.
Example
Target HTML
<amp-state id="allAnimals">
<script type="application/json">
{
"currentAnimal": "dog"
}
</script>
</amp-state>JSX
<Amp.AmpState id="allAnimals">
{{
currentAnimal: 'dog',
}}
</Amp.AmpState>AmpHelpers
Some amphtml components do not lend well to React or the way in
which react-amphtml was written. In these cases, the following components have
been added to make things easier.
AmpHelpers.Bind
amp-bind is a special extension of amphtml
which allows for defining a state object, using amp-state, and also [*]
bound attributes. JSX does not like any props or attributes which use [*]
notation so AmpHelpers.Bind can be used to make it easier to read in these cases.
-
props<Object>-
children<Function> -
[bound attribute]<string>
-
Example
Target HTML
<p [text]="'Hello ' + foo">Hello World</p>JSX
<AmpHelpers.Bind text="'Hello ' + foo">
{props => <p {...props}>Hello World</p>}
</AmpHelpers.Bind>AmpHelpers.Action
The
onattribute is used to install event handlers on elements. The events that are supported depend on the element. — AMP Docs
on is an attribute that is commonly used for actions, not just in
amphtml repo, but React too. React will remove any on attributes
from elements and try to set the appropriate event handlers, but
AmpHelpers.Action, has a small work-around to prevent this from happening. It's
also a bit easier to write the syntax for the events and actions that are to be
applied to an element.
-
props<Object>-
children<Function> -
events<Object>[eventName]<Array>
-
Example
Target HTML
<button on="tap:AMP.setState({ foo: 'amp-bind' })">JSX
<AmpHelpers.Action
events={{
tap: ['AMP.setState({ foo: "amp-bind" })'],
}}
>
{props => <button {...props} />}
</AmpHelpers.Action>Setup
Setup.AmpScript(props)
A component used to generate amphtml <script /> tags to be rendered in the
<head /> of the document. More than likely, you will not need to use this, as
these are created by an AmpScripts instance.
Class: Setup.AmpScripts
A class that is used to keep track of generated amphtml <script /> tags. An
instance of this should be given to AmpScriptsManager for Amp components to
utilize through context.
new AmpScripts(defaultHtml)
htmlFormat<string>
Pass either 'amphtml engine v0.js script' or
'amp4ads engine amp4ads-v0.js script' to setup a normal amphtml page or an
amp4ads page, respectively. Defaults to 'amphtml engine v0.js script' for a
normal amphtml page.
ampScripts.addExtension(extension)
Used to add a new <script /> tag for use in the <head /> of the
document.
extension<string>
Pass the name of an extension (ex 'amp-youtube') which corresponds to a
<script /> tag.
ampScripts.getScriptElements()
Returns an array of AmpScripts, <script /> tags, to be rendered in the
<head /> of the document.
Setup.AmpScriptsManager(props)
-
props<Object>-
children<Component> -
ampScripts<AmpScripts>
-
A component that passes an instance of AmpScripts as context to Amp
components.
Setup.headerBoilerplate(href)
href<string>
An function that returns an array of components for use in the <head /> of the
document. href is the canonical reference to the source page. The array should
include everything that amphtml validates for, excluding the
scripts generated by AmpScripts.
Resources
-
amphtml-validator-rules: the rules that get used to generate components -
AMP Project's
amphtmlrepo-
Builtins
-
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent