New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,441
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Marker.io
Add a Marker.io feedback button to the storybook UI
npm install @etchteam/storybook-addon-marker
Last updated over 1 year ago
99
Downloads per week
Readme View on GitHub

Storybook Addon Marker

A Storybook Addon to add a Marker.io feedback button in Storybook.

React Storybook Screenshot

Installation

npm install @etchteam/storybook-addon-marker --save-dev

Configuration

Create a file called main.js in your .storybook config folder.

Add the following content to it:

module.exports = {
  addons: ['@etchteam/storybook-addon-marker']
}

Then create a file called preview.js in the same folder and add your Marker destination as a parameter as well as the withMarker decorator:

import { addDecorator } from '@storybook/react';
import withMarker from '@etchteam/storybook-addon-marker/with-marker';

addDecorator(withMarker);

export const parameters = {
  marker: {
    destination: 'abcd1234567890', // <- Your unique destination ID
  }
}

To set the type of capture to trigger, the optional mode property can be added to the marker options:

export const parameters = {
  marker: {
    destination: 'abcd1234567890', // <- Your unique destination ID
    mode: 'fullscreen', // fullscreen | advanced
  }
}

It's possible to pass other Marker options to the marker parameter, either globally or per story. For example, custom metadata can be passed per story with the customData property:

export default {
  title: 'Example/Page',
  component: Page,
  parameters: {
    marker: {
      customData: {
        story: 'Page'
      }
    }
  }
};

Where to find your Marker destination and other Marker configuration options can be found on the Marker SDK documentation.

Made with ☕ at Etch

Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI