Add dropdown/button/radio for Pull Request action template

Forge Forge UI Kit and Custom UI
1

Hi team,

I have use case where I needed button functionality when I trigger forge app for pull request template action.
I have tried the below code but it does display blank screen.

Code snippet:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Button, render } from '@forge/react';
import { invoke } from '@forge/bridge';

const App = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const result = await invoke('getText', { example: 'my-invoke-variable' });
                setData(result);
            } catch (error) {
                console.error('Error fetching data:', error);
                setData('Error loading data');
            }
        };

        fetchData();
    }, []);

    const handleButtonClick = async () => {
        // Example of handling button click, you can replace with your logic
        console.log('Button clicked!');
    };

    return (
        <>
            <Button text="Click me" onClick={handleButtonClick} />
            <p>Hello world!</p>
            <p>{data !== null ? data : 'Loading...'}</p>
        </>
    );
};

// Render the component using ForgeReconciler
render(<App />);

image
image1529×733 119 KB

Can somebody help with this

Thanks

2

You need to render your app using ForgeReconciler like so:

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);