Marker.io
Add a Marker.io feedback button to the storybook UI
npm install @etchteam/storybook-addon-marker
85
Downloads per week
Readme View on GitHub
Storybook Addon Marker
A Storybook Addon to add a Marker.io feedback button in Storybook.
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