Componentを表示させる

StorybookにComponentを表示させる

試しにコンポーネントとsbファイルを作っていきます.

大抵Reactのプロジェクトでは,src/components内にコンポーネントを配置しますので,そちらにButtonコンポーネントを作成していきましょう.

src/components/Button.jsx

import React from 'react'

export const Button = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

こちらはいつものReactの関数コンポーネントです.label,onClickを受け取ってbuttonに反映させる仕組みです.

続けてsbファイルも作成します.sbファイルの位置は初期ではsrc配下にあればどこでも読み込んでくれる設定になっています.大体はコンポーネントファイルのすぐ隣に作るか,sbファイルを保存するファイルを別に作成するかの2パターンかと思います.今回はコンポーネントファイルのすぐ隣に作ってます.

src/components/Button.stories.jsx

import React from 'react'
import { Button } from './Button'

export default {
  title: 'Components/Button',
  component: Button,
}

export const Sample1 = () => <Button label='button' onClick={() => { }} />

sbでは表示させたいコンポーネントをimportしてそれを使った新たなコンポーネントを作成してexportするだけでOKです.このときにButtonコンポーネントで必要となるpropertyをサンプルとして書いておきましょう.

それでは,yarn storybookで実際に作ったコンポーネントがsbで確認できるか見てみましょう！