Storybook AMP ·
Storybook addon that allows you to display AMP HTML components generated with React in your stories
Features
- Deliver in each story the output code (AMP ready) resulting from the SSR.
- Works with AMP websites, AMP email and AMP ads
- Adds addon panel to validate the story (using online AMP Validator) and view the output code.
- Support Styled Components using a custom render function
Demo
https://storybook-amp.prototypearea.dev/
Installation
npm install -D storybook-amp
Configuration
Next, update .storybook/main.js
to the following:
module.exports = {
stories: [
],
addons: [
'@storybook/storybook-amp',
],
};
Usage
To set custom settings, use the amp
parameter.
const scripts = '';
const styles = '';
export const parameters = {
amp: {
isEnabled: true,
scripts,
styles,
},
};
You can use the amp
parameter to override settings on each story individually:
export default {
title: "Components/amp-youtube",
parameters: {
amp: {
scripts:
`<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>`,
},
},
};
export const Story = (args) => (
<amp-youtube
width="480"
height="270"
layout="responsive"
data-videoid='lBTCB7yLs8Y'
></amp-youtube>
)
For more examples and configurations go to the Demo
Tested Addons Compatibility
-
Addon Viewport
-
Addon Controls
-
Addon Backgrounds
-
Addon Storysource
-
Addon Docs (Coming soon)
-
Addon Toolbars (Coming soon)
-
Addon Accessibility (Coming soon)
AMP Documentation