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
システム開発
【サイン生成】セリナのオリジナルサイン
オリジナルサインの作成のGPTs ちょっとキャラクターを乗っけています。生成系AIは、今のところ漢字を描くのが苦手なので、ローマ字で登録ください。（ローマ字もたまに間違えますが）
2
1
2.05K
5.27K
WorkerBee
GPTs
資料作成
Marpスライド生成
Marpのコードを作って、それをVSコードに貼り付けるだけでスライド資料ができる！Unsplashで画像も入れられます！
0
0
10
113
bear Lab.
キャラクター作成
打倒！論破王ひろゆき（※GPT-4推奨）
論破王ひろゆきとディベート対決！！💥 ちょっとウザくてクセのある、あの口調を全力で再現しました。 ※GPT-4推奨
4
2
162
1.84K
Monji
画像生成
キャラクター作成
推奨モデル - Midjourney
【秋バージョン】美女モデル
秋バージョンに最適化されたプロンプトで美女を生成します #SNS #Instagram #X #Twitter #TikTok #ChatGPT #画像生成 #マーケティング
2
0
12
143
AIの先生 | OMG-okinawa

ReactのComponentからStorybookのStory生成

コメント 0

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