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

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

画像生成
キャラクター作成
AI美女生成プロンプト
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 あなた好みの美女を出力！！選択肢はなんと400通り。細かい設定も出来るので、この世で1番の美女を出力してみて下さい
10
0
77
329
Tam-BizAI編集長
資料作成
推奨モデル - GPT 4o
【上司の評価爆上がり】プレゼン一発生成🙌台本作成機能付き☺️
✨最強プレゼンAI爆誕！🎯資料＆台本を秒速で生成🙌 🔥台本つきで超安心！🎙️伝わるプレゼンが秒速で完成🙋‍♂️💬 #パワポ #資料作成 #プレゼン #会議 #企画
148
0
1.19K
7.73K
AIの先生 | OMG-okinawa
画像生成
キャラクター作成
ピクセルキャラをいっぱいだす。
ピクセルの人間がいっぱいでる
1
0
5
78
user_110418651661319168
マーケティング一般
推奨モデル - GPT 4o
【教えてAIコンテスト】プロンプト自動生成ツール【コピペで10万円！？】
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 コピペだけで毎月10万円も夢じゃない...!?教えてAIのプロンプトコンテストを攻略するためのツール第2弾です！このツールを使うと、プロンプトコンテストに出すためのプロンプト・タイトル・プロンプト説明が出力されます。コピペをするだけでプロンプトコンテストにエントリーをすることができるので、ぜひ活用してみてください。 ▶生成プロンプト①:【3歳児風】手書きイラストアイコン【LINEアイコン】▼ https://oshiete.ai/items/115804473805597696 ▶生成プロンプト②:【Xアイコンにおすすめ】レトロ未来風アイコン▼ https://oshiete.ai/items/115799264961576960 ▶生成プロンプト③:【インスタアイコン】水彩画の人物イラスト生成▼ https://oshiete.ai/items/115801856601047040 ▶こちらも参考になるのでぜひ確認してね▼ https://oshiete.ai/item_lists/73557973863457792 #ChatGPT
9
6
86
859
Tam-BizAI編集長

ReactのComponentからStorybookのStory生成

コメント 0

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