@jigsaw/storybook-amp

    1.0.11 • Public • Published

    Storybook AMP · npm package

    Storybook addon that allows you to display AMP HTML components generated with react in your stories

    Installation

    npm install -D storybook-amp

    Configuration

    Then create a file called addons.js in your storybook config.

    Add following content to it:

    import 'storybook-amp/register';

    Demo

    https://storybook-amp.netlify.com

    Usage

    To SSR the code at runtime time use the withAmpDecorator decorator inside config.js or specific story. To set custom settings, use the amp parameter.

    // config.js
    import { configure, addDecorator, addParameters } from '@storybook/react';
    import { withAmpDecorator } from 'storybook-amp';
    
    const customStyles = ''; // some styles
    
    // global
    addDecorator(withAmpDecorator)
    addParameters({
      amp: {
        isEnabled: true,
        styles: customStyles, // Custom styles from some string
      },
    });

    You can use the amp parameter to override settings on each story individually:

    // per story
    storiesOf('AMP', module)
      .add('Default', () => <Button>Send</Button>, {
        amp: {
          isEnabled: false,
        }
      });

    Install

    npm i @jigsaw/storybook-amp

    DownloadsWeekly Downloads

    1

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    24.4 kB

    Total Files

    14

    Last publish

    Collaborators

    • jigsaw