ReactのComponentからStorybookのStory生成

ReactのComponentからStorybookのStory生成

StorybookのStoryを生成します。

0
0
53
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でもシェアしていただけると嬉しいです^^
  • GPTs

    物語・脚本・プロット

     最近、動画生成AIが大流行していますが、「思った通りの動画が作れない」と感じたことはありませんか?  実は、高品質な動画を作るためには、プロンプトにできるだけ詳細な内容を盛り込むことが大切なんです。でも、それをうまくやるのはなかなか難しいですよね。  このGPTを使えば、あなたが入力したシンプルなプロンプトが、AIがもっと良い映像を作れるように、自動的に詳しく、そして洗練されたものに変わります。  スタイル内容やクオリティ、カメラワーク、光の入れ方など、映像制作に必要な要素をしっかりと組み合わせて、AIが最高の映像を生み出せるようサポートします。 おすすめの動画生成AI: 「Luma Dream Machine」 https://lumalabs.ai/dream-machine/creations 「Pika」 https://pika.art/ ※使い方はYouTubeなどで検索してください。
    3
    0
    35
    175
  • 分析・推論

    文章の感情を判定します。
  • GPTs

    キャラクター作成

    このGPTは、アップロードされた画像の詳細な説明を生成し、さらにその説明を基に画像生成AI用のプロンプトを作成することに特化しています。画像の被写体や要素、照明、アングル、スタイルを詳細に解析し、一般の人にも分かりやすい説明を提供します。その後、DALL-E3やStable Diffusion、Midjourneyなどの画像生成AI用に適したプロンプトを作成し、必要に応じて画像も生成します。 #画像生成 #画像解析 #プロンプト生成 #DALLE3 #StableDiffusion #MidJourney
    4
    0
    277
    1.00K