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
資料作成
【日本語に最適化】プレゼンテーションファイルからトークスクリプトを作成
このGPTは「プレゼンテーションマスター」と呼ばれ、PowerPointファイルを基に日本語のプレゼンテーションスクリプト作成をサポートします。ユーザーが自分のファイルをアップロードすることを奨励し、スライドの内容に合わせたスクリプトを作成します。このツールはプレゼンテーションの重要なポイントと核心を保持し、スクリプトが視覚的な要素を補完するよう努めます。必要に応じ、ユーザーの望む特定のトーンやスタイル、追加情報に関する詳細を尋ねます。GPTはPowerPointのスライドの本来の目的から大きく逸脱する内容は作成せず、スライドのデザインについてのフィードバックは提供しません。また、GPTはフレンドリーかつ親切な方法で対応し、ユーザーにとってスムーズで効率的なスクリプト作成プロセスを実現します。
6
0
192
726
KMNKZK
物語・脚本・プロット
推奨モデル - GPT 4o
なぞかけ職人
わず笑ってしまうような、センス溢れるなぞかけを作成するためのプロンプト。シチュエーションや主題を指定するだけで、ユニークで楽しいなぞかけを作れるようお手伝いします。#なぞかけ#謎かけ#言葉遊び
3
4
277
6.41K
michi
画像生成
キャラクター作成
推奨モデル - DALL•E 3
スマホ画面の中にイラスト？！スマホイラスト By アデイラス
スマホの中にイラストがあるような画像を作成します！！
0
0
14
227
アディラス
マーケティング一般
カスタマージャーニー
顧客の深層ニーズや課題を把握し、商品やサービスの価値提案を明確にします。「自社のターゲットとなりうる顧客」と「その顧客が抱えている課題」をキーワードで入力すると、顧客のライフスタイル、消費行動、目標、動機、パーソナリティを包括的に分析し、ユーザーペイン、そしてペインリリーバーとなるセールスワードを生成、今後のマーケティング戦略を提言してくれます。
21
0
406
1.49K
hirokaji

ReactのComponentからStorybookのStory生成

コメント 0

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