Use amphtml components inside your React apps easily!
import * as amphtml from 'react-amphtml';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, but with the amp- prefix removed, and camel-cased,
instead of kebab-cased.
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.
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.
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.
No constructor options.
Used to add a new <script /> tag for use in the <head /> of the
document.
-
component<string>The name of the component (ex
"amp-youtube").
Returns an array of AmpScripts, <script /> tags, to be rendered in the
<head /> of the document.
-
props<Object>-
children<Component> -
ampScripts<AmpScripts>
-
A component that passes an instance of AmpScripts as context to Amp
components.
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.
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.
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 Amp.Bind can be used to make it easier to read in these cases.
<p [text]="'Hello ' + foo">Hello World</p><Amp.Bind text="'Hello ' + foo">
<p>Hello World</p>
</Amp.Bind>amp-state, a component included in the amp-bind component script, requires
a single <script type="application/json" /> element, with JSON as a child. In
React, the requires using dangerouslySetInnerHTML. To make this easier,
Amp.State does the heavy lifting.
<amp-state id="allAnimals">
<script type="application/json">
{
"currentAnimal": "dog"
}
</script>
</amp-state><Amp.State id="allAnimals">
{{
currentAnimal: 'dog',
}}
</Amp.State>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 Amp.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.
<button on="tap:AMP.setState({ foo: 'amp-bind' })"><Amp.Action
events={{
tap: ['AMP.setState({ foo: "amp-bind" })'],
}}
>
<button />
</Amp.Action>-
AMP Project's
amphtmlrepo-
Builtins
-