ReactのComponentからStorybookのStory生成

ReactのComponentからStorybookのStory生成

StorybookのStoryを生成します。

0
0
71
3

投稿日時:

  • プロンプト実行例
  • プロンプトを見る
ReactのComponentからStorybookのStory生成

Componentを入力してください。 コードブロックで囲むと綺麗に表示できます。

TypeScript
1export type ExampleProps = {
2  message: string;
3};
4
5const Example: FunctionComponent<ExampleProps> = ({message}) => {
6  const {isActive, setIsActive} = useState(true);
7  return (
8    <Fragment>
9      <button onClick={() => setIsActive(!isActive)}>オンオフ</button>
10      {isActive && <p>{message}</p>}
11    </Fragment>
12  );
13}
14
15export default Example;
ReactのComponentからStorybookのStory生成
TypeScript
1import React, { useState } from 'react';
2import { Story, Meta } from '@storybook/react';
3
4import Example, { ExampleProps } from './Example';
5
6export default {
7  component: Example,
8  title: 'Example',
9} as Meta;
10
11const Template: Story<ExampleProps> = (args) => <Example {...args} />;
12
13export const Default = Template.bind({});
14Default.args = {
15  message: 'Hello, World!'
16};

コメント 0

他のプロンプトもチェック

  • GPTs

    SNS投稿

    ✨ あなただけのクリスマスカード&年賀状を、AIで簡単に作成! ✨ たった3ステップで、オリジナルカードが完成! 1.テンプレートを選ぶ: 紫色の「GPTSを開く」ボタンをクリック(タップ)し、「1. Christmas1」または「2. nenga1」の番号で、クリスマスカードと年賀状のどちらかを選びましょう。 2.画像のイメージを伝える: 「雪降る街並み」や「可愛いウサギ」など、作りたい画像のイメージを具体的に教えてください。 3.AIが自動作成: あとはAIにおまかせ! あなたのイメージに基づいて、AI(DALL-E3)が画像を生成し、選んだテンプレートに自動で合成します。 完成した作品は… ダウンロードして、SNSにアップ! (LINE、Facebook、Instagram、Twitterなど) 大切な人に届けましょう! ※ワード、ドキュメント、Canvaなどで印刷して、送る事も出来ますよ。 【ポイント】 画像のイメージはできるだけ具体的に伝えましょう。 例えば、「雪が降る街並み、サンタクロースがプレゼントを配っている」のように、詳細を伝えることで、よりイメージに近い画像が生成されます。 さあ、AIと一緒に、世界に一つだけのクリスマスカード&年賀状を作りましょう! 🎅🐇🎉
    94
    25
    437
    1.27K
  • 画像生成

    キャラクター作成

    推奨モデル - DALL•E 3
    ほんのり霞む湯気に濡れた髪・・・究極の色っぽさ・・・99.9%が悩殺ノックダウン!
  • 画像生成

    SNS投稿

    推奨モデル - DALL•E 3
    あなたのSNSプロフィールをスタイリッシュに彩るための特別なアイコンデザインツールです。 このプロンプトは、ミニマルかつシックなデザインを求める方に最適です。お好みのイニシャルを入力するだけで、シンプルでありながら他と一線を画す、洗練されたSNSアイコンを生成します。 主な特徴: シブさと洗練の融合: モノトーンを基調としたスタイリッシュなデザインで、個性を際立たせます。 カスタマイズ可能: イニシャルを指定しデザインスタイルを選ぶことで、あなただけのオリジナルアイコンを作成できます。 シンプルながらも際立つデザインで、あなたの存在感を強調し、他との差をつけましょう! ---------- 😊少しでも気に入っていただけましたら、お気に入り(❤マーク)をクリックしていただけると、とても励みになりますので、ぜひお願いいたします。 😊また、「いつか使ってみよう」と思っている方も、お気に入りに登録しておくと、いつでもマイページからすぐにご利用いただけます。 😊感想など、お気軽にコメントください。
    1
    0
    17
    109
  • チャットボット

    久々のプロンプト。今回は漢字と読み方を指定するとキラキラネームであるかどうか判定します!