Passing a function to Plasmic component.

I have a situation where I’m trying to get a plasmic code component to have a button that calls a function in the hosting index.tsx page.

There is a method called openModalForm, that is essentially function that I pass as a prop to this component I am trying to use as a code component, but I don’t know how to pass that function to the component!

const ctaModalState = UseCtaModalState();
const openModalForm = (formName: string, modalId: string): void => {
    OpenModalForm(ctaModalState, formName, modalId);

How do I use that in a way like this?

                    <div className='bg-spacecadet-101'>
                        <div className='mx-auto max-w-screen-xl bg-home-hero bg-auto bg-bottom bg-no-repeat sm:p-5'>

PLASMIC.registerComponent(HomepageHeroComponent, {
name: ‘HomepageHeroComponent’,
props: {
// Pass in arbitrary content in the visual editing canvas
openModalForm: ‘slot’,

Where I can send the function so that it calls the callback correctly.

It would look something more like this

componentProps={{button name:{onClick:…}}}

Check out the docs here!

You can also play with the API if you click on the drop down next to the Code button in the toolbar, and select API explorer.

Register component is a different / more powerful feature for when you want to register your own components to make them available as building blocks that you can drag and drop within plasmic

@yang ok, passing the onClick works, but how do I provide the button inside the code component with a “name that element in Plasmic” notation when it is imported so that I can override just the button click?

Normally elements are not named, but if you want to force a specific type of code component to be force-named, you would need to add some sort of state to it:

If it’s helpful, another way you could go about this that doesn’t introduce a tight coupling between your rendering code and the Plasmic design (which the name binding would do) is to provide the onClick functionality as a custom behavior, so that your editors can attach these to their buttons:

Or (more simply), if you want to just have your registered button component always be able to do a specific action up at your page level, you can use normal React context to provide that:

<MyModalContext.Provider value={{openModalForm}}>
    <PlasmicComponent ...>

And then in your code component:

function MyCodeComponentButton(props) {
  const {openModalForm} = useContext(MyModalContext);
  return <button onClick={openModalForm}>Open modal</button>;

Let me know if that’s along the lines of what you’re trying to accomplish!