More than 1 year has passed since last update.

Storybook で特定の Story で Controls を無効にする

Last updated at 2022-11-24Posted at 2022-11-24

概要

Storybook のアドオンの一種である Controls を使用するストーリーとしないストーリーがある際に、使用しないストーリーでは Controls パネルを使用できないようにする。

粒度の小さいコンポーネントは1ストーリーで複数の props パターンをレンダリングすることがあり、その場合は Controls が不要になるため。

各ストーリーの parameters フィールドで、 props ごとに Controls を無効化するための exclude オプションが使用できるが、ここで正規表現を用いることができるので、全ての props がマッチするようにする。

export default {
  title: 'SampleComponent',
  component: Component,
  parameters: {
    controls: {
      exclude: /.*/g
    }
  }

こんな感じになる。