❤Nanananananananana.. Pat Man!

    npm

    Sign UpSign In

    react-amphtml
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.2 • Public • Published

    react-amphtml

    Use amphtml components inside your React apps easily!

    Usage

    react-amphtml exports React components and functions to easily create AMP HTML pages. Each exported React component has a TypeScript interface and PropTypes derived from AMP HTML's own validator rules to speed up development and make it safer. Boilerplate and the inclusion of AMP directive-specific scripts is all handled for you!

    // All AMP elements
    import * as Amp from 'react-amphtml';
     
    // Helper render props for actions and bindings
    import * as AmpHelpers from 'react-amphtml/helpers';
     
    // Components and functions to render pages
    import {
      AmpScripts,
      AmpScriptsManager,
      headerBoilerplate,
    } from 'react-amphtml/setup';

    Amp Components

    import * as Amp from 'react-amphtml';
    // ...
    <Amp.AmpCarousel {...props} />

    The main file exported by react-amphtml contains all of the AMP HTML directives as React components. This includes the custom element amp-* directives, normal HTML directives with validations required by AMP, and some components with added functionality: Html, AmpState (amp-state directive) and Script.

    To see a list of available components and their relative documentation see the official AMP components documentation: The AMP component catalogue.

    Amp Helpers

    import * as Amp from 'react-amphtml';
    import * as AmpHelpers from 'react-amphtml/helpers';
     
    // Example of attaching actions to elements
    <AmpHelpers.Action events={{...}}>
      {(props) => (
        <button type="button" {...props}>
          Do Something
        </button>
      )}
    </AmpHelpers.Action>
     
    // Example of using state and bindings together
    const defaultHeading = {
      text: 'Hello, World!',
    };
    // ...
    <Amp.AmpState specName="amp-state" id="heading">
      {defaultHeading}
    </Amp.AmpState>
    <AmpHelpers.Bind text="heading.text">
      {(props): ReactElement => <h1 {...props}>{defaultHeading.text}</h1>}
    </AmpHelpers.Bind>

    The helpers file contains render prop components that help add AMP attribute directives for actions and bindings. Wondering what actions and bindings are all about? Check out these official guides on the subjects:

    Amp Setup

    import * as Amp from 'react-amphtml';
    import {
      AmpScripts,
      AmpScriptsManager,
      headerBoilerplate,
    } from 'react-amphtml/setup';
     
    const ampScripts = new AmpScripts();
     
    const bodyContent = renderToStaticMarkup(
      <AmpScriptsManager ampScripts={ampScripts}>
        <div>
          <Amp.AmpImg
            specName="default"
            src="/"
            width={0}
            height={0}
            layout="responsive"
            alt="test"
          />
          <Amp.AmpAccordion />
        </div>
      </AmpScriptsManager>,
    );
     
    /* eslint-disable react/no-danger */
    const html = renderToStaticMarkup(
      <Amp.Html>
        <head>
          {headerBoilerplate('/')}
          <title>react-amphtml</title>
          {ampScripts.getScriptElements()}
        </head>
        <body dangerouslySetInnerHTML={{ __html: bodyContent }} />
      </Amp.Html>,
    );
    /* eslint-enable */
     
    const htmlPage = `
      <!doctype html>
      ${html}
    `;

    The setup file makes creating pages for AMP HTML a breeze. It helps insert all the necessary boilerplate and also the scripts needed for AMP directives.

    The code is based on the requirements from AMP documented in Create your AMP HTML page: Required mark-up.

    Examples

    Full Example

    Go checkout ampreact!

    If you are looking for an example that is in combination with one or more of these tools:

    ampreact gives a very nice setup to get started with or learn from!

    Simple Example

    For simple usage examples of react-amphtml, check the Jest unit tests in react-amphtml/src/__tests__/react-amphtml.spec.tsx. The best test to look at is can server-side render valid html for a good complete usage of react-amphtml.

    Development

    About

    The code for react-amphtml is generated from AMP HTML's own validator via amphtml-validator-rules.

    Want to learn about AMP HTML validation? See the guide: Validate AMP pages.

    Need to run the validator? Use either the online tool The AMP Validator or the npm package amphtml-validator.

    Commands

    Use the following commands to develop on react-amphtml.

    • npm run codegen: Create components based on AMP HTML's validator. This must be done at least once prior to running npm run build, and can be done afterwards anytime code in codegen is modified.

    • npm run build: Bundles the source files into dist.

    • npm run typecheck: Uses TypeScript to ensure type safety. Should be run after running npm run build to check the files in dist that are bundled.

    • npm run lint: Use ESLint to check source files.

    • npm run test: Use Jest to run tests.

    Resources

    Keywords

    Install

    npm i react-amphtml

    Repository

    Gitgithub.com/dfrankland/react-amphtml

    Homepage

    github.com/dfrankland/react-amphtml#readme

    DownloadsWeekly Downloads

    2,590

    Version

    4.0.2

    License

    MIT

    Unpacked Size

    656 kB

    Total Files

    52

    Last publish

    Collaborators

    • dfrankland
    Try on RunKit
    Report malware