[REACT] Allow using react components in task/event renderers

[bmblb]

Forum post

Is there a way to use custom react node in task render function, for example:

const taskRenderer = ({ cardConfig, taskRecord }: any) => {
    cardConfig.children.body.children.details = {
      html: <CardBody />
    };
};

This example renders [object Object], I also tried tag property and passing string instead of object, but with no luck.
I need a way to dynamically load different cards.
This is just a simple example, but I would also pass the props to my CardBody component.

Thanks

[bmblb]

related issue #3452

[Aarbel]

@bmblb do you have any advancement updates on this ?

[isglass]

Hi @Aarbel,

I am afraid there isn't anything new to report on this issue yet. But you should be able to listen to the renderTask och TaskBoard, which is triggered when a tasks element is available. In the listener you could portal in your React component. You would have to manage cleanup of it too in a removeTaskElement listener.

https://bryntum.com/docs/taskboard/api/TaskBoard/view/mixin/TaskBoardDomEvents#event-renderTask

[jeffreybos]

Is there also an option to show React Components in Events at the Scheduler Pro?

[jsakalos]

Unfortunately, we don't yet support React components as task renderers. However, a user posted an approach that works for him in tooltips. Perhaps it is worth to try; it may work for tasks too. Here is the link: https://www.bryntum.com/forum/viewtopic.php?f=44&t=13554

[marciogurka]

+1 user post asking for this feature.

[matsbryntse]

Being implemented in #4600