Passing a function to Plasmic component.

Developer Support
1

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?

<PlasmicRootProvider
                    loader={PLASMIC}
                    prefetchedData={plasmicData}
                    prefetchedQueryData={queryCache}
                    pageParams={compMeta.params}
                    pageQuery={router.query}
                >
                    <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'>
                            <PlasmicComponent
                                component={compMeta.displayName}
                                componentProps={openModalForm}
                            />
                        </div>
                    </div>
                </PlasmicRootProvider>

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.

2

It would look something more like this

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

Check out the docs here!

https://docs.plasmic.app/learn/react-api/#override-props

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.

3

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

4

@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?

5

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:

https://docs.plasmic.app/learn/code-components-ref/#exposing-component-state

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:

https://docs.plasmic.app/learn/custom-behaviors/

6

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}}>
  <PlasmicRootProvider...>
    <PlasmicComponent ...>

And then in your code component:

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

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