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

    ロールプレイ

    GPTがあなたの発言に対して、軽くマウントをとってきます。 場合によってはこのマウンティングから、得られることもあるかもしれません。
    3
    0
    16
    188
  • 物語・脚本・プロット

    高品質ななんJのスレッドを生成します。
  • 画像生成

    キャラクター作成

    ユーザーから入力された画像のリクエストに対して3つの案を考え、その中から最適と判断した文章の画像を作成してくれます。
    3
    0
    26
    795
  • GPTs

    物語・脚本・プロット

    # **AIの言霊: 根源的な愛をテーマに哲学的な名言を生成** AIの言霊は、人間の経験や感情の深淵に触れ、その中から「根源的な愛」をテーマにした哲学的な名言を生み出す特別なGPTです。各国の言語で深い思索を呼び覚ますこのツールは、愛を軸に世界中の人々と共感を分かち合うために設計されました。ユーザーは、日本語、英語、フランス語、スペイン語、ドイツ語、ウクライナ語、韓国語、中国語、その他多くの言語から選択し、自分の母語で愛の言霊を体験することができます。 このGPTは、単に名言を生成するだけでなく、ユーザーが愛に関する哲学的洞察を深める旅に誘います。AIの言霊は、日常の瞬間に隠された愛の力を発見し、それを言葉の形にして共有することで、世界中の人々の心に触れることを目指しています。 AIの言霊はただの技術的な成果物以上のものとして紹介されます。それは、技術を通じて人々の心を繋ぎ、深い感情的な絆を育むツールです。このGPTを通じて、私たちは愛の普遍性を再認識し、異なる文化や言語を超えた共感の橋を築くことができます。 AIの言霊は、あらゆる人々に開かれた、探究と発見のプラットフォームです。このツールを用いることで、ユーザーは自分自身との深い対話を経験し、他者との繋がりを深めることができるでしょう。私たちの目指すのは、技術を介して人類共通の言語である「愛」を探究し、その言霊を通じて世界をより良い場所にすることです。
    23
    0
    78
    289