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

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

  • GPTs

    キャラクター作成

    ▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 どんな画像でもGPTsに送付すると特徴をとらえたまま美女の画像になって返ってきます。 自分の画像を送るのもいいですし、友達の画像を送ってネタにするのもオススメ。 自分のSNSアイコン画像にするのもいいですね。 ぜひ利用してみて下さい。 #美女 #DALLE
  • コード生成・修正

    プログラミング言語「Wren」のスクリプトコードを生成します!!
  • GPTs

    要約

    論文のPDFを投げるだけで、要約して返してくれる便利なGPTsです。 1. 論文のPDFを読み込む 2. 論文の要約を3~5個の箇条書きで示す。一つの箇条書きは100字程度の文章。 以下のような構成で出力してくれます。 著者や雑誌名、公開年など、論文執筆に必要な情報を出力してくれるので、論文引用への導線もスムーズです。 *タイトル(原文) ----------------------------------------------------------- *著者 ----------------------------------------------------------- *雑誌名 ----------------------------------------------------------- *公開年 ----------------------------------------------------------- *日本語の要約 -----------------------------------------------------------
    5
    0
    139
    456
  • 画像生成

    SNS広告

    推奨モデル - Midjourney
    綺麗でSEXYなお姉さんは好きですか? 是非、お気に入りを見つけてみてはいかがでしょうか? #Midjourney #DALL・E3 #美女
    16
    15
    170
    561