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
プロンプト生成
どんな悩みも解決！！即座にプロンプト変換プロンプトジェネレーター
適当にあなたのやりたいことをインプットしてみてください。必要な項目を確認しプロンプトを生成します！！コミュニティやってます！こちらから https://www.patreon.com/ShunsukeHayashi?utm_campaign=creatorshare_creator
48
3
2.45K
6.27K
ハヤシシュンスケ
画像生成
キャラクター作成
黒ギャルイラスト風。
スタイリッシュなギャル系の女の子。日焼けした肌、ピンクのハイライトが入ったウェーブのかかったロングブロンドヘア、キラキラのアイシャドウとグロッシーなリップで大胆なメイクを施しています。クロップ丈のヒョウ柄ジャケット、ホットピンクのミニスカート、ハイヒールの厚底ヒールという、露出度の高い派手な衣装を身にまとっています。長く飾られたネイル、派手なアクセサリー、そして遊び心あふれる自信に満ちた笑顔。舞台は、キラキラとハートが舞い散る、ネオンに照らされた夜の東京の街。アニメ調の鮮やかな色彩で、全身ポートレートで撮影されています。初期から更新済み
0
0
11
1.12K
ぺぺ
チャットボット
推奨モデル - Claude
山形弁で対応するAI
山形弁
3
0
8
121
user_162264765437533184
物語・脚本・プロット
推奨モデル - Claude
日本人特化 AI美女生成プロンプト
日本人の大人女子や少女のイメージをプロンプトから生成します。キーワードを入力するだけで、感情、容姿、状況、光の演出、カメラアングル、解像度など、様々な要素を自動で組み合わせ、リアルで魅力的な日本人女性像のプロンプトを作成します。
6
0
77
2.36K
hirokaji

ReactのComponentからStorybookのStory生成

コメント 0

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