storybook/docs/_snippets/storybook-addon-toolkit-tab-example.md
2024-06-13 17:53:08 +01:00

676 B

import React from 'react';

import { useParameter } from '@storybook/manager-api';
import { PARAM_KEY } from './constants';

// See https://github.com/storybookjs/addon-kit/blob/main/src/components/TabContent.tsx for an example of a TabContent component
import { TabContent } from './components/TabContent';

interface TabProps {
  active: boolean;
}

export const Tab: React.FC<TabProps> = ({ active }) => {
  // https://storybook.js.org/docs/addons/addons-api#useparameter
  const paramData = useParameter<string>(PARAM_KEY, '');

  return active ? <TabContent code={paramData} /> : null;
};