ReactでStorybookを使ってみる（2）

概要

今回は用意されたサンプルのコードではなく、自分で作ったコンポネントを表示してみます。

前回の記事の続きみたいな感じです。 該当ファイルに関しては説明を割愛しているので、わからなくなったら前の記事を参考にしてみてください。

Storybookってなんだろ〜？からなんとなく始めましたが、UIちくちくするのが好きなのでちまちまいじっています。

実装

まず、表示したいコンポネントを作ります。今回はButtonコンポネントを作ってみました。

import React, { Component } from 'react';

class Button extends Component {
  render() {
    return (
      <button style={styles.button}>
        {this.props.text}
      </button>
    );
  }
}

const styles = {  
  button: {
    borderRadius: "3px",
    backgroundColor: "#3498db",
    padding: "10px 16px",
    fontSize: "14px",
    color: "#fff",
    border: 'none',
    cursor: 'pointer'
  }
}

export default Button

次に、このButtonコンポネントをStorybookに組み込みます。

import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../src/components/Button'; // <--①importします

storiesOf('Button', module)
  .add('simple button', () => (
    <Button text="Hello button" /> // <--②addします
  )); 
  

これで自分の作ったコンポネントがStorybookに表示されるようになりました！

自作コンポネントのカタログ作成が捗りますね〜。