How to pass function props to code components?

Developer Support
1

Hi Team,

Is there a way to pass functions as props or while registering the components. As I am facing issue while Registering below AntD Components. I have grouped them as per the need of function. Because of this I’m not able to test these directly on Plasmic Studio.

A. Below components need render functions e.g. RenderItem to be passed as props :
Transfer
List
Tree

B. Components getting displayed with methods like on, show (Conditional) :
Notification
Message
Modal

import { message, Button } from 'antd';

const info = () => {
[message.info](http://message.info)('This is a normal message');
};

<Button type="primary" onClick={info}>
Display normal message
</Button>

Thank you.

2

Hi @then_camel, there’s currently no way to pass a function from Plasmic studio to code.

For the items in B, maybe you can create components that wrap Ant components adding some functionality, e.g.:

function MessageButton({ msg: string, ...props }) {
  const info = () => {
    [message.info](http://message.info)(msg);
  };
  return <Button {...props} onClick={info} />;
}

...

registerComponent(MessageButton, {
  name: "MessageButton",
  props: {
    msg: string;
    ...
  }
});
3

For something like antd’s List, maybe you can implement a wrapper using Plasmic’s repeatedElement? https://docs.plasmic.app/learn/code-components/#utility-functions

4

Thank you. I will go through this link.