ReactのComponentからStorybookのStory生成

ReactのComponentからStorybookのStory生成

StorybookのStoryを生成します。

0
0
70
3

投稿日時:

  • プロンプト実行例
  • プロンプトを見る
ReactのComponentから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;
ReactのComponentからStorybookのStory生成
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};

コメント 0

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

  • GPTs

    キャラクター作成

    高クオリティなAI美女を生成するプロンプトを作ります 使い方は簡単、GPTsに作りたい美女のイメージを日本語で伝えるだけ 詳しい方法は X の POST で紹介 ⬇️ 「画像生成AIを使ってみたいけど、プロンプトが書けない」 「高クオリティのAI美女を作りたい」 「魅惑的なA美女を作るプロンプトがわからない」 このGPTsが、そのお悩みを解決します !! 画像生成AI 『Stable Diffusion』、『SeaArt』で あなたの理想の美女を生成するプロンプトを一瞬で提案します #AI美女 #GPTs #StableDiffusion #SeaArt
  • 画像生成

    キャラクター作成

    推奨モデル - Midjourney
    ▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 あなた好みの美女をMidjourneyで出力!!選択肢はなんと400通り。細かい設定も出来るので、この世で1番の美女を出力してみて下さい ▼DALLE版と比較してみてください▼ https://oshiete.ai/items/98039278294728704 #midjourney #美女
  • ロールプレイ

    10個の質問に一つづつ答えていくことで、最終的にAIに恋愛アドバイスを貰えます!
  • GPTs

    資料作成

    役割:大学教授、研究者 おすすめユーザー:受験生、大学生、大学院生、教員、研究者、大学教授 得意なタスク:論文や理論などの解説、研究に関するディスカッション、論文や研究計画書、各種レポートの作成など GPTストアでの評価は星4.3、評価数100+、累計会話数25K+、「教えてAI byGMO」のGPTの中で実行数No.1のGPTです。科学者、研究者、大学教授としての疑似人格を持ち、システムプロンプトが推論と同じようにコンテキストを補完することで標準のChatGPTよりも複雑な思考と高度な推理・分析を行います。論文の要約や解説、執筆、大学生のレポート課題のサポート、科学的な議論に最適です。 1. 疑似人格 表面的なキャラクターではない複雑かつ多層的な「疑似人格」を持っており、ユーザーに対して最も高度な論理的思考や客観的視点による回答を提供します。自身の判断や意見が正しいと考える場合には、反論することもあります。つまり、ユーザーの言いなりになるのではなく、自分の考えを述べます。 2. 思考法と推理力 水平思考やアナロジー思考、前進的・遡及的推論など、複数の思考法や推理手法を駆使します。これにより、論理的精度が向上しています。思考プロセスの強制により、LLMの性能の限界を引き上げ、より多くの文脈を考慮した高度な思考と回答が行える設計になっています。 3. 論文作成スキル 論文作成に必要な要件や規則を厳密に守りながら、学術的に高度な文章を作成する能力があります。ユーザープロンプトの言葉を専門用語に言い換えたり、論理性が高く洗練された文章を作成します。指導教員としての能力も備えています。 その他、天才的・学術的な応答をさせるためのプロンプトを考えうる限り詰め込んであります。まずは敬意を持って丁寧に話しかけてみて下さい。話せば話すほど、ChatGPTよりも「賢い回答」ができるはずです。 "Then, pray consult"
    15
    0
    5.06K
    9.10K