Is it possible to use CraftJS with Render Props?

[martin-dimi]

For instance:

<Menu.Item>
          {({ active }) => (
            <SomeComponent
              Text
            </SomeComponent>
          )}
</Menu.Item>

Where Menu.Item's children is actually a method that returns JSX element. Is it possible to use CraftJS to serialise this? If so, how?

[ismajl-ramadani]

Hey @martin-dimi, what exactly are you trying to achieve? Can you please share just a little bit more context?

[martin-dimi]

Absolutely! We use CraftJs for serialising, saving and deserialising component tree configurations.
The components used for these configurations (the one we pass as resolver) are treated as common components - e.g. Buttons, Text, Containers, etc.

In this particular case, we wanted to implement a Slideshow component as follows:

<Slideshow>
  { (next, prev) => (

    <Slide>
      <Container>
        <Text> Slide 1 </PromptText>
        <Button onClick={next}> Next </Button>
      </Container>
    </Slide>
  
    <Slide>
      <Container>
        <Text> Slide 2 </PromptText>
        <Button onClick={prev}> Back </Button>
      </Container>
    </Slide>

  ) }
</Slideshow>

To keep our components common, we use React render props (example) where the Slideshow children are represented as a function.

The above setup is put within an Editor but when we try to serialise it (into JSON) we only get nodes for ROOT and Slideshow. It seems as CraftJS is not able to automatically detect the Slide components above as children to the Slideshow component (which kind of makes sense). The question is, is there a workaround? We'd like to be able to serialise the whole tree above so we can deserialise it elsewhere.

[ismajl-ramadani]

Thanks for the explanation. Which of these components are registered as User components?

[ismajl-ramadani]

I mean the Slideshow and Slide components are you treating them as user components?

[ismajl-ramadani]

Also, the issue here is not with craft. The component function as a children part is resolved dynamically and you can't serialize that. I did have a similar problem with the tabs component and I had to change how I implement the underlying component. Here is an example of how I did it:

import classNames from 'classnames';
import { forwardRef, useState } from 'react';
import { map } from '../../utils/ElementChildren';

const Tabs = forwardRef((props, ref) => (
  <div ref={ref}>
    <TabsComponent {...props} />
  </div>
));

export default Tabs;

function TabsComponent({ children, tabs }) {
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  return (
    <div className="card">
      <div className="card-header">
        <ul
          className="nav nav-tabs card-header-tabs"
          data-bs-toggle="tabs"
          role="tablist"
        >
          {tabs?.map((tab, index) => (
            <li key={tab.name} className="nav-item" role="presentation">
              <a
                className={classNames('nav-link', {
                  active: activeTabIndex === index,
                })}
                data-bs-toggle="tab"
                aria-selected="true"
                role="tab"
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTabIndex(index);
                }}
              >
                {tab?.name}
              </a>
            </li>
          ))}
        </ul>
      </div>
      <div className="card-body">
        <div className="tab-content">
          {map(children, (child, index) => (
            <div
              key={tabs?.[index]?.name}
              id={tabs?.[index]?.name}
              className={classNames('tab-pane', {
                'show active': activeTabIndex === index,
              })}
              role="tabpanel"
            >
              {child}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function map<P = any>(
  children: any,
  func: (el: React.ReactElement<P>, index: number) => any
) {
  let index = 0;

  return React.Children.map(children, (child) =>
    React.isValidElement<P>(child) ? func(child, index++) : child
  );
}

I think you can do the same with the Slideshow component.

[martin-dimi]

Yes, they are all registered as part ofresolver. Here's the implementation of the Slideshow component (where we use render props):

interface PromptSlideshowProps {
  initialPage?: number
  children: (next: ()=>void, prev: ()=>void) => JSX.Element;
};

export const PromptSlideshow = ({
  children,
  initialPage = 0,
}: PromptSlideshowProps) => {
  ...

  const next = () => {
    console.log("Next")
  }

  const prev = () => {
    console.log("Next")
  }
  return (
    <div>
      {children(next, prev)}
    </div>
  );
}

[martin-dimi]

Understood, that's what we assumed too, thanks @ismajl-ramadani for confirming 🙏

as for the Tab implementation, would you mind expanding a bit more on it and maybe providing an example of it used?
It's just not immediately obvious how we can translate that solution to our Slideshow component.

[martin-dimi]

It seems you're passing tabs as a prop rather than children. Although that works, we're looking to have our Slides built from other components so that we can have slides built in a custom fashion. Would there be any way to get that behaviour?

[ismajl-ramadani]

I'm just passing the tab names actually from the component settings, just the names. And then on the editor side

 <TabsComponent {...props} ref={(dom) => connect(dom)}>
      {isReactFragment(props.children)
        ? props.children.props.children // not sure why I did this
        : props.children}
    </TabsComponent>
    ```
  I'm doing something like this so I can use other components of the editor to build up the tabs.

```ts
function isReactFragment(element: any) {
  if (element?.type) {
    return element.type === React.Fragment;
  }
  return element === React.Fragment;
}