ReactのComponentからStorybookのStory生成

ReactのComponentからStorybookのStory生成

StorybookのStoryを生成します。

0
0
71
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

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

  • チャットボット

    推奨モデル - Claude
    ヒス構文chatを体験しよう!
    0
    5
    122
    7.02K
  • 資料作成

    推奨モデル - ChatGPT
    ✨最強プレゼンAI爆誕!🎯資料&台本を秒速で生成🙌 🔥台本つきで超安心!🎙️伝わるプレゼンが秒速で完成🙋‍♂️💬 #パワポ #資料作成 #プレゼン #会議 #企画
  • GPTs

    計画立案

    ユーザーのプロジェクトを幾つかのタスクに分割し、それらを実行します。 トリガーフレーズ: 「タスク毎に、step-by-stepで始めて下さい。」 【 LLM Agent について 】 LLM Agent は、以下の主要機能を通じて、あなたを支援する半自律型エージェントです。 ⬛主要機能 ・ プロジェクトの分解 : 複雑なプロジェクトを明確で管理しやすい小さなタスクに分解します。 ・ タスクの改善 : 過去の経験や自己分析から得られた洞察を用いて、タスクの実行方法を改善します。 ・ 詳細なリサーチ : 特定のタスクに対し、深いリサーチを行い、必要な情報を収集した上で行動します。 ・ 長期記憶の獲得 : 情報を保持し、再収集することで、長期記憶を形成します。 ・ ツールの利用 : 情報ソースへのアクセスを活用し、追加情報を取得します。 ⬛あなたにもたらす利点 ・ 高品質な意思決定 : 豊富な情報に基づいて、的確な意思決定をサポートします。 ・ カスタマイズされた支援 : あなたのニーズに合わせて、最適な解決策を提供します。 --- LLM Agent は、半自律的に情報を収集し、プロジェクトの流れに沿って行動します。   [ 技術トレンドレポート ] https://t.co/hyp1NAGsJK   [ AI技術の動向 ] https://t.co/7eyB86w3QM LLM Agent は、その機能を活用して、場合によっては長文を出力することがあります。   [ AI Trends 2024 ] https://t.co/d5YhLXctXh また、簡単な物語を作成させることも可能です。   [ サイバーパンク小説の作成 ] https://t.co/UJzR4BhFXF トリガーフレーズを使用しない場合でも、ユーザーのリクエスト(翻訳、要約、文章の生成など)に適切に対応し、その能力を発揮します。   [ サイバーパンク小説の修正 ] https://t.co/URz5Rn0nKr   [ ツイートの翻訳 ] https://t.co/2Qg9ttleKG  
    42
    0
    803
    2.18K
  • GPTs

    資料作成

    Googleフォームの回答結果をリアルタイム連動し分析内容を提供します。 作り方はXで共有しています。
    3
    1
    220
    1.15K