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
キャラクター作成
擬人化実写メーカー
なんでも実写風の擬人化できるメーカーです。
2
0
346
1.29K
smarf
物語・脚本・プロット
推奨モデル - GPT 4o
なぞかけ職人
わず笑ってしまうような、センス溢れるなぞかけを作成するためのプロンプト。シチュエーションや主題を指定するだけで、ユニークで楽しいなぞかけを作れるようお手伝いします。#なぞかけ#謎かけ#言葉遊び
3
5
319
8.21K
michi
GPTs
ロールプレイ
【心のサンドバック】なかなか人には話しにくい悩みや愚痴こそ、AIに遠慮なくぶつけましょう！
※ChatGPTアプリ版で音声入力推奨※ AIが相手なら何も気にすることはありません。あなたの悩み、愚痴、怒り、、、抱えているフラストレーションを思いっきりぶつけましょう！どんなことも、すべて受け入れます。会話の前にAIのパーソナリティを指定することで、その役になりきって会話をしてくれます。かしこまったりすることなく、普段の会話のように利用してみてください！
0
0
28
201
KOHEI FUNAKOSHI
GPTs
文案作成
タメ口をビジネス文章に翻訳（仮）
タメ口からビジネス文章へ。大袈裟な変換をしてしまうのでジョークアプリ。職場でこっそり使って笑ってください😆 （開発者は思わず声が出ました）本格的に使えるように調整中。変換例ユーザー　なあ部長、もう帰りたいんだが ↓ 変換　了解いたしました。こちらが、部長宛のフォーマルなビジネスメールの例文です： --- 件名：本日の退社に関するお願い [部長の姓] 部長お疲れ様です。[あなたの氏名]です。突然のご連絡となり、申し訳ございません。本日は私事により、通常より早めに退社させていただきたいと考えております。業務に支障が出ないよう、早めに準備を整えました。また、不在中の対応についても、[同僚の氏名]に引き継ぎを行いました。万一、緊急の事態が発生した場合は、携帯電話にご連絡いただければと思います。ご多忙の中、大変恐縮ではございますが、ご理解のほどよろしくお願いいたします。敬具 [あなたの氏名] [あなたの部署名] [会社名] --- このメールは、あなたの状況に合わせて適宜修正してご使用ください。
1
0
30
190
user_5884

ReactのComponentからStorybookのStory生成

コメント 0

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