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

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

文案作成
推奨モデル - GPT 4o
厨二病系組織名を提案！
厨二病みたいな組織名を提案します！
1
0
20
1.63K
アディラス
マーケティング一般
推奨モデル - GPT 4o
X（旧twitter）ツイート自動作成ツール
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 投稿ジャンルを入力するだけで投稿のネタを30個自動で作成してくれます。投稿ネタが思いつかないというときに活用してみて下さい。 ▼Xアカウント分析ツールと合わせて活用してみてください▼ https://oshiete.ai/items/103164791170852864
20
3
193
983
Tam-BizAI編集長
コード生成・修正
スクリプト・複数ファイルをひとつのファイルに
HTML・CSS・JavaScript等が複数ファイルに分かれたものをひとつのファイルにまとめられます。使用用途としては、ノーコードサイト等ではCSSやJavaScriptを単体では置けないことがあります。故にCSSとJavaScriptも置きたい！って時一応 HTMLを含めてひとつのファイルにまとめると設置できるようになります
1
0
4
189
アディラス
資料作成
推奨モデル - GPT 4o
レジュメ職人　～初心者向け講座の資料をかんたん一発作成！
🌟 初心者のあなたでも、講座主催がもっとラクに！ 🌟 「セミナーや勉強会のレジュメって作るの大変…😢」そんなお悩み、もう解決できます！💡 このプロンプトなら、初心者向けイベント（セミナーや勉強会など）のレジュメが超簡単に自動作成できるんです！ 🎉 🎯 これがスゴイ！ポイント4つ 1️⃣ 誰でも簡単！どんなテーマでもサクッと設定するだけで、魅力的な講座レジュメを作れます。 2️⃣ マークダウン対応！読みやすさバツグン✨ 見た目もプロ並みの仕上がりに。 3️⃣ 自由自在！出力後に「この部分をもっと詳しく！」と指定すれば、さらに充実した内容も追加可能。 4️⃣ 今すぐ主催者デビュー！これがあれば、初心者でも迷わずイベントを企画・実行できます💪 🌈 夢の講座主催、始めませんか？ 🌈 「いつかは自分で勉強会を…」と思っていたあなた！このプロンプトがあれば、その「いつか」を「今」に変えられます ⏰✨ 🎉 さあ、一歩踏み出そう！あなたのアイデアが、誰かの学びになる 📚 このプロンプトを使って、あなたのイベントが一瞬で形になります！🎤✨ 👉 さっそく試して、世界にひとつだけの講座を作ろう！ 💡✨
29
0
90
461
VEP

ReactのComponentからStorybookのStory生成

コメント 0

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