### Import Core and Helper Modules in React
Source: https://github.com/dfrankland/react-amphtml/blob/master/README.md
Import all AMP elements and helper render props for actions and bindings. Also imports setup components for rendering pages.
```javascript
import * as Amp from 'react-amphtml';
import * as AmpHelpers from 'react-amphtml/helpers';
import {
AmpScripts,
AmpScriptsManager,
headerBoilerplate,
} from 'react-amphtml/setup';
```
--------------------------------
### Build Complete AMP Page with React
Source: https://context7.com/dfrankland/react-amphtml/llms.txt
This example demonstrates how to build a complete, AMP-valid HTML document string using react-amphtml. It composes various AMP components and uses a two-pass rendering approach to manage scripts.
```tsx
import React, { ReactElement } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import * as Amp from 'react-amphtml';
import * as AmpHelpers from 'react-amphtml/helpers';
import { AmpScripts, AmpScriptsManager, headerBoilerplate } from 'react-amphtml/setup';
function buildAmpPage(): string {
const ampScripts = new AmpScripts();
const initialState = { heading: 'Welcome!', count: 0 };
const bodyContent = renderToStaticMarkup(
}
{/* Responsive image */}
{/* Interactive button using Action */}
{(props): ReactElement => (
)}
{/* Form extension */}
,
);
const html = renderToStaticMarkup(
{headerBoilerplate('https://example.com/')}
My AMP Site
{ampScripts.getScriptElements()}
{/* eslint-disable-next-line react/no-danger */}
,
);
return `${html}`;
}
const page = buildAmpPage();
// page is a complete, AMP-valid HTML document string
// Includes: v0.js, amp-bind, amp-form scripts automatically
```
--------------------------------
### Use Amp Helpers for Actions and Bindings in React
Source: https://github.com/dfrankland/react-amphtml/blob/master/README.md
Utilize render prop components from 'react-amphtml/helpers' to add AMP attribute directives for actions and bindings. This example shows attaching actions to a button and using state with bindings for dynamic content.
```javascript
import * as Amp from 'react-amphtml';
import * as AmpHelpers from 'react-amphtml/helpers';
// Example of attaching actions to elements
{(props) => (
)}
// Example of using state and bindings together
const defaultHeading = {
text: 'Hello, World!',
};
// ...
{defaultHeading}
{(props): ReactElement =>
{defaultHeading.text}
}
```
--------------------------------
### Set up AMP HTML Pages with Boilerplate and Scripts
Source: https://github.com/dfrankland/react-amphtml/blob/master/README.md
Use components from 'react-amphtml/setup' to generate AMP HTML pages. This includes managing AMP scripts and inserting required boilerplate markup for AMP validation.
```javascript
import * as Amp from 'react-amphtml';
import {
AmpScripts,
AmpScriptsManager,
headerBoilerplate,
} from 'react-amphtml/setup';
const ampScripts = new AmpScripts();
const bodyContent = renderToStaticMarkup(
,
);
/* eslint-disable react/no-danger */
const html = renderToStaticMarkup(
{headerBoilerplate('/')}
react-amphtml
{ampScripts.getScriptElements()}
,
);
/* eslint-enable */
const htmlPage = `
${html}
`;
```
--------------------------------
### Render AMP Components with React AmpHTML
Source: https://context7.com/dfrankland/react-amphtml/llms.txt
Demonstrates rendering built-in and extension AMP components, including managing script registration for extensions. Ensure AmpScriptsManager wraps content and use headerBoilerplate for canonical links and boilerplate styles.
```tsx
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import * as Amp from 'react-amphtml';
import { AmpScripts, AmpScriptsManager, headerBoilerplate } from 'react-amphtml/setup';
const ampScripts = new AmpScripts();
// Render body content — AmpScriptsManager collects required extension scripts
const bodyContent = renderToStaticMarkup(
{/* Built-in: no extra script tag generated */}
{/* Extension: amp-accordion script auto-registered */}
Section 1
Content for section 1.
{/* Extension with explicit version */}
Hello, {'{{name}}'}!
,
);
// Assemble full AMP page
const html = renderToStaticMarkup(
{headerBoilerplate('https://example.com/page')}
My AMP Page
{ampScripts.getScriptElements()}
,
);
const fullPage = `${html}`;
// fullPage is a fully valid AMP HTML document
```
--------------------------------
### Generate AMP Head Boilerplate
Source: https://context7.com/dfrankland/react-amphtml/llms.txt
Use `headerBoilerplate` to generate essential AMP `` elements. Pass the canonical URL of the page as the sole argument.
```tsx
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import * as Amp from 'react-amphtml';
import { AmpScripts, headerBoilerplate } from 'react-amphtml/setup';
const ampScripts = new AmpScripts();
const head = renderToStaticMarkup(
{headerBoilerplate('https://example.com/my-amp-page')}
My AMP Page
{ampScripts.getScriptElements()}
,
);
// Produces:
//
//
//
//
//
//
// My AMP Page
//
//
```
--------------------------------
### `Action` Helper
Source: https://context7.com/dfrankland/react-amphtml/llms.txt
The `Action` render-prop component simplifies the creation of AMP event-driven actions by compiling an `on` attribute string. It maps event names to arrays of action strings and injects the attribute into the child element.
```APIDOC
## `Action` Helper — `import * as AmpHelpers from 'react-amphtml/helpers'`
`Action` is a render-prop component that generates the AMP `on` attribute string for event-driven actions. It accepts an `events` object mapping event names (e.g., `tap`, `change`, `submit`) to arrays of action strings, and injects the compiled `on="..."` attribute into the child element via the render prop callback.
```tsx
import React, { ReactElement } from 'react';
import * as AmpHelpers from 'react-amphtml/helpers';
import { ActionOnProps } from 'react-amphtml/helpers';
// Single event, multiple actions
const tapButton = (
{(props: ActionOnProps): ReactElement => (
)}
);
// Renders: