Storybook(CSF3.0)でdefault exportではないコンポーネントを追加したいっ！(React)

2022年3月4日

サンプルが雑ですが、hoge.tsxにはHogeとFooがあって、Hogeはexport defaultです。

export default Hoge = () => {
  render <>Hoge</>;
}

export Foo = () => {
  render <>Foo</>;
};

これをstorybookで動かそうとすると、そもそもdefaultの方が呼ばれてしまいますが、以下のようにすれば良いようです。

import Hoge, { Foo } from 'hoge';

export default {
  component: Hoge
};

export const Default = {};

export const foo = {
  component: Foo,
  render: (args) => <Foo {...args} />
};

参考

Component Story Format 3.0

関連記事

  1. React(TypeScript)でコンポーネントのtypeを別のコンポーネントで使いたいっ！[ComponentProps] とあるコンポーネントのPropsで指定しているtypeを使いまわしたい時にComponentPropsを使うのを忘れそうなのでメモ。 const Hoge: React.FC<{ id: number }> […]...
  2. vuejsのエラーをなんとかしたいっ！ Vuejsを触っていて表示されたエラーをメモっていきます。 Property or method “hoge” is not defined on the...
  3. react-i18nextのuseTranslationをTranslationコンポーネントに書き換えた話 ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。 (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるM […]...
  4. react.jsで別のComponentへのアクセス htmlは以前用意したもの(Hello, React.js!! まずは何か表示してみる。)をそのままで。 var Message = React.createClass({ render: function() {...
React