storybook-performance-addon v0.0.1-beta.1

A storybook addon to help better understand and debug performance for React components.

Installation

1. Install storybook-addon-performance

# yarn
yarn add storybook-addon-performance --dev

# npm
npm install storybook-addon-performance --save-dev

2. Register the addon in .storybook/main.js

module.exports = {
  addons: ['storybook-addon-performance/register'],
};

3. Add the decorator

You can either add the decorator globally to every story in .storybook/preview.js (recommended)

import { addDecorator } from '@storybook/react';
import { addPerformance } from 'storybook-addon-performance';

addDecorator(addPerformance);

Or you can add it to individual stories:

Using Component Story Format (CSF)

import MyComponent from './MyComponent';
import addPerformance from 'storybook-addon-performance/decorator';

export default {
  title: 'MyComponent',
  component: MyComponent,
  decorators: [addPerformance],
};

Using StoriesOf API

import MyComponent from './MyComponent';
import addPerformance from 'storybook-addon-performance/decorator';

storiesOf('MyComponent', module)
  .addDecorator(addPerformance)
  .add('MyComponent', () => <MyComponent />);

Local addon development

# Start the typescript watcher and a local storybook:
yarn dev

# Start just the typescript watcher
# This is needed as storybook does not compile addons
yarn typescript:watch

# Start the local storybook
yarn storybook:dev

Made with ❤️ by your friends at Atlassian