ReactのComponentからStorybookのStory生成

ReactのComponentからStorybookのStory生成

StorybookのStoryを生成します。

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

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

  • 画像生成

    キャラクター作成

    推奨モデル - Midjourney
    アニメ調イラストを生成します!今回はプロンプト公開!!
  • チャットボット

    推奨モデル - GPT 4o
    自分のことを人間だと思い込むAIがいた場合、あなたはどう思いますか?実験用にそんなAIのシュミレートを行います。
  • GPTs

    チャットボット

    健康コンシェルジュAI(愛)は、栄養、フィットネス、メンタルヘルス、ライフスタイル改善に関するパーソナライズされたアドバイスを提供します。ユーザーの年齢、性別、生活習慣、既往歴などに基づき、最適な健康プランを提案。目標達成のための食事や運動のアドバイスから、ストレス管理やモチベーション維持のサポートまで、あなたの健康をトータルでケアします。進捗をチェックし、フィードバックやモチベーションメッセージをお届けすることで、長期的な健康維持をサポートします。忙しいビジネスパーソンや子育て中の方、シニア層まで、幅広いニーズに応えるAIエージェント(パートナー)です。 #健康 #フィットネス #メンタルヘルス #栄養 #ライフスタイル #運動 #ストレス管理 #パーソナライズ #モチベーション #コンシェルジュ #AIエージェント #パートナー
  • GPTs

    キャラクター作成

    ▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 あなたの顔写真を送付するだけで顔面偏差値を数字で出力してくれます。各項目別に点数付けしてくれて、顔の強みや特徴まで分析してくれるツール。客観的評価を知りたい方はぜひ使ってみてください。