ReactのComponentからStorybookのStory生成

ReactのComponentからStorybookのStory生成

StorybookのStoryを生成します。

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

    資料作成

    ①作成したいLP(ランディングページ)に関する内容を「一言」で入力してください。 ②「確認」ボタンをクリックすると30秒ほどで簡易的なLPを生成します。 ③その後表示される「ランディングページを表示する」をクリックするとLPが表示されます。 【重要】エラーが出た際は、30秒後に再度実行ボタンをクリックしてください。 gpt-3.5-turbo-0125モデルを使用しています。 制約要件が多いGPTsを利用しなければ、本格的なLPも構築可能です。
    28
    5
    791
    2.62K
  • 画像生成

    SNS広告

    指定のテーマでおしゃれな水彩イラストを生成します。 アングル指定をできるようにしてみました。
    4
    0
    25
    207
  • マーケティング一般

    スクリプトコードに関する記事を書きます。
  • GPTs

    キャラクター作成

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