Use amphtml
components inside your React apps easily!
import * as Amp from 'react-amphtml';
import * as AmpHelpers from 'react-amphtml/helpers';
import { AmpScripts, AmpScriptsManager, headerBoilerplate } from 'react-amphtml/setup';
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 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.
Some of the components of the Amp
object are overridden to provide more
ergonomics to using them in React.
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.
<amp-state id="allAnimals">
<script type="application/json">
{
"currentAnimal": "dog"
}
</script>
</amp-state>
<Amp.AmpState id="allAnimals">
{{
currentAnimal: 'dog',
}}
</Amp.AmpState>
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 AmpHelpers.Bind
can be used to make it easier to read in these cases.
-
props
<Object>
-
children
<Function>
-
[bound attribute]
<string>
-
<p [text]="'Hello ' + foo">Hello World</p>
<AmpHelpers.Bind text="'Hello ' + foo">
{props => <p {...props}>Hello World</p>}
</AmpHelpers.Bind>
The
on
attribute 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>
-
<button on="tap:AMP.setState({ foo: 'amp-bind' })">
<AmpHelpers.Action
events={{
tap: ['AMP.setState({ foo: "amp-bind" })'],
}}
>
{props => <button {...props} />}
</AmpHelpers.Action>
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.
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.
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.
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
.
-
amphtml-validator-rules
: the rules that get used to generate components -
AMP Project's
amphtml
repo-
Builtins
-