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

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

GPTs
キャラクター作成
浮世絵スタイルで創造するアート生成AI「浮世絵クリエイター」
「浮世絵クリエイター」は、あなたのシンプルなキーワードから、美しい浮世絵スタイルの画像を生成するAIです。日本の伝統美を現代の技術で再現し、どなたでも簡単にオリジナルの浮世絵を作成できます。このAIは、葛飾北斎をリスペクトした色使いやタッチを特徴としており、アート作品だけでなく、教材やインテリアデザインにも活用いただけます。簡単な使い方で、あなたのアイデアを美しい作品に変えるお手伝いをします。 #浮世絵 #AIアート
4
0
51
323
みっちゃん
要約
60点を100点にするプロンプト
AIの生成結果に納得いかない時に繰り返し使えるプロンプト
13
0
11
2.41K
user_122129646672062464
GPTs
計画立案
生成AIパスポート試験　直前対策支援GPT
生成AIパスポート試験本番（２月１６〜１７日）　に向けた直前の試験対策GPTです。生成AIパスポート試験のシラバスから出題します。章番号を指定すると１０問の練習問題が出題されます。４択の演習問題と穴埋めの演習問題を交互に出題します。４択ばかりだと飽きてきますので穴埋め問題も交互に出題されるようにしました。１０問おわると正答率を表示します。間違えた問題を中心に学習することもできます。また、やっていない問題を中心に学習することもできます。人は、考えてみてわからなったという体験のすぐ後に解説が表示されると記憶に残りやすいものです。解答をまちがったりわからなかったあとは詳しく、その内容について詳しく表示されます。
8
1
136
605
林せんせい
SNS広告
推奨モデル - Claude
【インスタ特化】ペルソナ分析
▽最新作はこちら▽ https://oshiete.ai/item_lists/73557973863457792 インスタグラムの発信内容とターゲットの簡単な特徴を入力すれば、超詳細なペルソナ分析と投稿内容例を作成します。投稿ネタが思いつかない・時間がないというときに活用してみて下さい。
26
1
114
517
Tam-BizAI編集長

ReactのComponentからStorybookのStory生成

コメント 0

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