ReactのComponentからStorybookのStory生成

おだんごん

: ReactのComponentからStorybookのStory生成

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;

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};

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

画像生成
キャラクター作成
推奨モデル - Midjourney
浴衣を着た美女を生成【美女AI画像生成】
今の時期にピッタリな浴衣を着た美女の画像を生成します。毎回ちょっぴり違う美女が生成されますのでお楽しみください！ #midjourney #アイコン #Instagram #X #Twitter #SNS #画像生成
7
2
39
471
佐藤さん
チャットボット
推奨モデル - Gemini
Gemini破限
#扮演
1
0
3
225
user_278657568736647168
SNS広告
推奨モデル - GPT 4o
【プロ作成】ショート動画台本自動作成ツール
▶最新の有益プロンプトはこちら▼ https://oshiete.ai/item_lists/73557973863457792 SNSマーケターのノウハウを詰め込んだ、そのまま使える質の高い台本が出力されます。自動でヒアリングから台本作成まで行います。Xやインスタリール、YouTubeショート、TikTok全てに使えるショート動画。ショート動画戦国時代をAIとともに乗り越えましょう！！ #instagram #tiktok #YouTube
28
2
218
968
Tam-BizAI編集長
画像生成
キャラクター作成
推奨モデル - DALL•E 3
究極のナース美女【白衣の天使が舞い降りる】
病気や体調不良、悩みやストレスを抱えているときに元気をくれる1枚。脳内でセロトニンやドーパミンが分泌され、心の癒やしと生命力をもたらし、驚異的に快復を早める。まさに美しき女神の降臨。
12
0
45
240
user_128286078432577536

ReactのComponentからStorybookのStory生成

コメント 0

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