Unable to expose the onClick prop to my button component.

[raymond_zhang]

Pretty self explantory from the title, I’m trying to control the behaviour of a button through react (code) and according to the other posts I need to expose a prop called “onClick”? Based on my limited knowledge of using Plasmic Studio, I can tell that the buttons already have a default interaction called " On click", but this doesn’t appear to be the same thing?

What have you tried so far? (please link relevant docs and other forum posts)
I have looked at older posts which have a similar problem but the ui of Plasmic Studio has changed to the point where I can’t follow beyond certain points. I have also tried changing the name of the default prop “On click” to “onClick” but there is no option to make it a “eventHandler” which apparently is what it needs to be.

Any help is appreciated.

Relevant links:

• Project

[raymond_zhang]

@fmota

[sarah_ahmed]

Hello @raymond_zhang and welcome to the forum!

I’m trying to control the behaviour of a button through react (code) and according to the other posts I need to expose a prop called “onClick”

but there is no option to make it a “eventHandler”

It looks like you might be mixing up two different sections of the documentation.

There’s 2 ways you can use a Button component in Plasmic Studio

1. Use the built-in customizable Button component provided by Plasmic Studio - that’s the one I see in your project’s Login page. The On Click prop of the Button is already linked correctly, so you can use the Button’s On Click interaction to do whatever you need to do when the button is clicked. Learn more about interaction in our docs: Introduction to interactions and state | Learn Plasmic
   (I see that you have attempted to configure the On Click interaction of the Login form button, but it looks incomplete)

2. If the built-in button component is insufficient for your needs, you can register your own using our Code Components API. There, you can register a prop of type eventHandler. Learn more about code components here: Code components API reference | Learn Plasmic

[raymond_zhang]

Thanks @sarah_ahmed, for some context that I am trying to configure a button that has this functionality which you can see from the project itself.

Judging by your response, rather than the built-in customizable button component (or “Plasmic Button”) I need to be looking at no.2? I’ve kind of given that a try to try register a eventHandler prop to a free box but there isn’t that option? If you can refer me to a past post or just show a quick demonstration of where I need to be looking, that would be so much appreciated. Presumably from the code aswell the prop will be called “onClick” and will have type “eventHandler”?

Kind regards,
Raymond.

[sarah_ahmed]

If you need to call some function specifically from code, you can check out the registerFunction API. Registering custom functions | Learn Plasmic

You might also want to check out our docs on Global Contexts: Global Contexts | Learn Plasmic

As for the button, I don’t see any exquisite button-specific functionality that the Plasmic’s built-in button cannot achieve.

[raymond_zhang]

When the button (in this case a “plasmic button” is pressed, it does some checking on the backend to see if the user email and password is valid (if they both are, then we go to the /Home page). Hence why I need to control the behaviour of the button with something like “onClick” externally (i.e. through code). The current “On click” interaction only interacts with other components that are only on plasmic studio (to my knowledge). According to chatgpt, I should have been able to override a prop called “onClick” of type “eventHandler” hence my confusion. If this is achieveable via the built-in button, I would appreciate a demo on how this is done.

Much appreciated,
Raymond.

[alex_noel]

@raymond_zhang Hi!
Just to sum up - the main goal here is to somehow give Plasmic access to your back-end endpoint /auth/login.
As @sarah_ahmed mentioned – there are two solutions for your problem, both of which are fairly similar:

1. Create a global actions provider. See the code example in the link; it already includes logic for login and logout, and maybe you would also want to store the user inside the global context to easily access it throughout your app. For now, you can replace the login function with your code from the message above.
2. Register your function through the registerFunction method. It will look something like this:

import { login } from '@/path/to/login';

PLASMIC.registerFunction(isEven, {
  name: 'login',
  params: [
    {
      name: 'email',
      type: 'string',
      description: 'User email'
    },
    {
      name: 'password',
      type: 'string',
      description: 'User password'
    },
    {
      name: 'rememberMe',
      type: 'boolean',
      description: 'Remember user or no'
    },
 
  ],
  returnValue: {
    type: 'object',
    fields: {
      ok: 'boolean',
      error: 'string',
    },
  }
});

In both cases, you would end up having a new method available in the interactions on your button, something like this:

And you would be able to either redirect through the code, or add another interaction “go to page” when the action is done and run this action through “run this step” and selecting success from previous step results (you are able to access the data returned from the previous steps in the dynamic values)