Develop you app page elements

To create the element, create a file inside pages and name it page.tsx with the following content:

import { Wrapper } from "@hygraph/app-sdk-react";

export default function Page() {
    return (
        <Wrapper>
            <h1>Hello, Hygraphers!</h1>
            <p>Here is the description</p>
        </Wrapper>
    );
}

In this example, you are naming the file page.tsx because at the time of registering the app you used http://localhost:3000/page as your URL.

Next, import useApp() at the top, then create PageElement component and move code there.

Then you need to get the installation object from useApp() to display you app name, description, and icon.

import { Wrapper, useApp } from "@hygraph/app-sdk-react";

function PageElement() {
    const { installation } = useApp();
    return (
        <div>
            <div>
                {/* <!-- This is the app avatar --> */}
                <img src={installation.app.avatarUrl} width="32" height="32" />
            </div>

            {/* <!-- This is the app name --> */}
            <h1>{installation.app.name}</h1>

            {/* <!-- This is the app description --> */}
            <p>{installation.app.description}</p>
        </div>
    );
}

export default function Page() {
    return (
        <Wrapper>
            <PageElement />
        </Wrapper>
    );
}

Then, add showToast:

import { Wrapper, useApp } from "@hygraph/app-sdk-react";

function PageElement() {
    const { installation, showToast } = useApp();
}

After that, add button with handleClick method:

return (
        <div>
            <div>
                {/* <!-- This is the app avatar --> */}
                <img src={installation.app.avatarUrl} width="32" height="32" />
            </div>

            {/* <!-- This is the app name --> */}
            <h1>{installation.app.name}</h1>

            {/* <!-- This is the app description --> */}
            <p>{installation.app.description}</p>

            {/* <!-- Add button --> */}
            <div>
                <button onClick={handleClick}>Click Me!</button>
            </div>
        </div>
    );

And finally, add handleClick method, triggering showToast:

function PageElement() {
    const { installation, showToast } = useApp();

    const handleClick = () => {
        showToast({
            title: "Hello World!",
            description: "This is a toast message",
            variantColor: "success",
        });
    };

    // rest of code
}

Your complete custom app element should look like this:

// this is the complete code

import { Wrapper, useApp } from "@hygraph/app-sdk-react";

function PageElement() {
    const { installation, showToast } = useApp();

    const handleClick = () => {
        showToast({
            title: "Hello World!",
            description: "This is a toast message",
            variantColor: "success",
        });
    };

    return (
        <div>
            <div>
                {/* <!-- This is the app avatar --> */}
                <img src={installation.app.avatarUrl} width="32" height="32" />
            </div>

            {/* <!-- This is the app name --> */}
            <h1>{installation.app.name}</h1>

            {/* <!-- This is the app description --> */}
            <p>{installation.app.description}</p>

            {/* <!-- Add button --> */}
            <div>
                <button onClick={handleClick}>Click Me!</button>
            </div>
        </div>
    );
}

export default function Page() {
    return (
        <Wrapper>
            <PageElement />
        </Wrapper>
    );
}