Adding click interactions to code-components

Plasmic Studio Questions
1

Dear Plasmic Team, I’m planning to use Plasmic for all our frontend projects and therefore I’m going to create code-components and DataProviders that connect to all the data from our backend.
I understand how to display the data with DataProviders and code-components, but I couldn’t figure out how I can add interactions like onClick interaction to a code-component… how do I do that? It’s the missing piece for me right now…

2

Hello @stuck_guineafowl. You can expose a eventHandler prop type in your code component metadata. I recommend reading this
https://docs.plasmic.app/learn/code-components-ref/#prop-types
and this
https://docs.plasmic.app/learn/code-components-ref/#exposing-component-state
from our docs to understand how to make your code components fully integrated with interactions in studio.
Feel free to ask any more questions!

3

Hmm :thinking_face: … typescript complains in my code (registerComponent call) and it’s also not in the autocomplete list for the “type”, that’s why I didn’t try it.
And also Plasmic Studio complains when I try it anyway…

image.png

4

Are you using @plasmicapp/react-web or @plasmicapp/loader-*? Could you please try updating the one you’re using to the latest version?

5

I’m using @plasmicapp/loader-nextjs and just updated it. @plasmicapp/react-web seems to be installed as well. I initially set the project up via Plasmic Studio and pushed it to a new github repo, from there it has involved with code components.
I’m using NextJS with the app directory feature and the PLASMIC loader is instantiated like this:

import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
export const PLASMIC = initPlasmicLoader({
    projects: [
        ....
    ],
    preview: true,
});

I use the PLASMIC variable to call PLASMIC.registerComponent.

Even after the update of the package (updated all @plasmicapp/* packages) the error stays the same.

6

You should only have one of these two packages (loader-nextjs and react-web). Since you’re using loader, could you try removing the react-web package please?

7

If this still does not solve it, can you please provide the component meta you’re trying to register?

8

when I uninstall the react-web package and then do plasmic sync, it prompts me to install the react-web package again.

this is the code component:

import * as React from "react";
import ReactQRCode from "react-qr-code";
import type { NextJsPlasmicComponentLoader } from "@plasmicapp/loader-nextjs";

export const QRCode = ({
    value,
    ...props
}: {
    value: string;
} & React.HTMLAttributes<HTMLDivElement>) => {
    return (
        <div {...props}>
            <ReactQRCode value={value} />
        </div>
    );
};

export const registerQRCode = (PLASMIC: NextJsPlasmicComponentLoader) => {
    PLASMIC.registerComponent(QRCode, {
        name: "QRCode",
        props: {
            value: {
                type: "string",
                defaultValue: "<https://plasmic.app>",
            },
            onClick: "eventHandler",
        },
        importPath: "./src/+components/@code-components/QRCode",
    });
};
9

Here’s the typescript error / the autocomplete suggestion

image.png
image.png1424×846 97 KB

10

Ok, I found it. When I use

onClick: {
    type: "eventHandler",
    argTypes: [],
}

it works. I remember trying to use the object notation before and it gave me the same error. Maybe updating the package helped indeed.
So this is fixed now, that’s awesome! :party:

thanks for your help :slight_smile: