How to use the @storybook/addons.register function in @storybook/addons

channel.emit(RTL_EVENT, this.state.rtlEnabled);
  };

  render() {
    return (
      <div>
        <button type="button">
          {this.state.rtlEnabled ? 'Disable' : 'Enable'} RTL
        </button>
      </div>
    );
  }
}

// Register the addon with a unique name.
addons.register('rtl-toggle', api =&gt; {
  // Also need to set a unique name to the panel.
  addons.addPanel('rtl-toggle/panel', {
    title: 'RTL',
    render: () =&gt; ,
  });
});

export default devices => {
  addons.register('PeterPanen/storybook-addon-scissors', () => {
    // Add panel with unique name.
    addons.addPanel('PeterPanen/storybook-addon-scissors/panel', {
      title: 'Scissors',
      render: () => (
        
      ),
    });
  });
};

import addons, { types } from '@storybook/addons'
import React from 'react'

import Themes from '.'

addons.register('formol_themes', api => {
  addons.addPanel('formol_themes/panel', {
    type: types.PANEL,
    title: 'Formol Themes',
    // eslint-disable-next-line react/display-name
    render: ({ active, key }) => ,
  })
})

render() {
    const { active } = this.props;
    const { text } = this.state;

    return active ? (
      <div style="{{">
    ) : null;
  }
}

addons.register('storybook/props', api =&gt; {
  const channel = addons.getChannel();

  addons.addPanel('storybook/props/panel', {
    title: 'Props',
    // eslint-disable-next-line react/prop-types
    render: ({ active }) =&gt; (
      
    )
  });
});
</div>

export default (options) => {
  var { dataUrl } = options;

  if (!dataUrl) {
    console.log('The Brand.ai library viewer is not configured');
    return;
  }

  addons.register(ADDON_ID, api => {
    const channel = addons.getChannel();
    addons.addPanel(PANEL_ID, {
      title: 'Design Library',
      render: () => ,
    });
  });
}

import React from 'react'
import addons from '@storybook/addons'
import Panel from './Panel'

addons.register('storybook-styled-components', api => {
  const channel = addons.getChannel();

  addons.addPanel('storybook-styled-components/panel', {
    title: 'Theme Picker',
    render: (panelState) => ,
  })
})

import '@storybook/addon-knobs/register'
import '@storybook/addon-contexts/register'
import '@storybook/addon-actions/register'
import '@storybook/addon-backgrounds/register'
import 'storybook-addon-jsx/register'
import 'storybook-addon-react-docgen/register'

import addons from '@storybook/addons'
import { STORY_RENDERED } from '@storybook/core-events'

addons.register('TitleAddon', api => {
  api.on(STORY_RENDERED, () => {
    const storyData = api.getCurrentStoryData()
    document.title = `${storyData.name} - Saladict Storybook`
  })
})

export function register() {
  addons.register(ADDON_ID, () => {
    addons.addPanel(PANEL_ID, {
      title: 'Actions',
      render: ({ active, key }) => ,
      paramKey: PARAM_KEY,
    });
  });
}

export function register () {
    addons.register(ADDON_ID, () => {
        addons.addPanel(PANEL_ID, {
            title: 'Locales',
            render: (props) => (
                
            )
        });
    });
}

)
  }

  public componentWillUnmount() {
    if (this.stopListen) {
      this.stopListen()
    }

    const { channel } = this.props

    channel.removeListener(Events.ShowDocs, this.onShowDocs)
  }
}

addons.register(AddonName, api => {
  addons.addPanel(PanelName, {
    title: 'Info(Vue)',
    render: ({ active, key }) => (
      
    )
  })
})