New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@foxpage/foxpage-component-editor-storybook-addon
FoxPage component editor storybook addon
npm install @foxpage/foxpage-component-editor-storybook-addon
Last updated 11 months ago
4
Downloads per week
Readme View on GitHub

Config

register in .storybook/addon.ts

import '@foxpage/foxpage-component-editor-storybook-addon/lib/register';

Useage

in your *.stories.js file:

// import addon
import { withFoxpageEditor, mountEditor } from '@foxpage/foxpage-component-editor-storybook-addon';

// import component and editor
import Component from '../src/index';
import Editor from '../editor/index';

// init stories
const stories = storiesOf('Use foxpage-editor-addon', module);
stories.addDecorator(withFoxpageEditor);

stories.add('editable story', () => {
  // mount edit with props
  const props = mountEditor(Editor, {
    promoId: 593,
    blockId: 1,
  });

  // use props
  return <Component {...props} />
});
Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI