Children

You can add content children in the Design Editor, using the children property in Register Vev component.

children is an object containing the following properties.

Name/type	Description
name string	Use to identify the content child in the Design Editor.
icon string	Use to to add a custom icon for the content children.

Example of the content children in use is the Slider component.

Render content children

When content children is added in vevRegisterComponent, you component will receive a children prop. This prop is an array of content keys for the content added as children in the Design Editor.

To render the content, you can use thee WidgetNode component from @vev/react.

slideshow.js

import React from "react";
import { registerVevComponent, WidgetNode } from "@vev/react";
import styles from "./slideshow.module.scss";

const Slideshow = ({ children = [] }) => {
  return (
    <div className={styles.wrapper}>
      {children.map((child) => (
        <div slide={styles.slide} key={child}>
          <WidgetNode id={child} />
        </div>
      ))
    </div>
  );
};

registerVevComponent(Slideshow, {
  name: "My awesome component",
  children: {
    name: "Slide",
    icon: "./slide-icon.png",
  }
});

export default Slideshow;