Register Vev component

Install the React package into an existing React project:

npm i @vev/react --save

If you are creating a new project, you can also use the vev create command to get a boilerplate.

Register

In order to run your components, you first need to register them using the registerVevComponent function. In your ./src directory you can add your first component. Components can be initialized anywhere in your project inside a ./src folder, but all components need to be exported.

registerVevComponent(Component, Config);

Config

Possible config parameters for registerVevComponent:

Name/type	Description
name string	Name of your component which will be visible in Vev. This is a required field.
type string	The type of the component in the Vev. Can be standard, section, code or both. Default is standard.
size object	The default size of the component. width: number, height: number; Default is width: 100px and height 100px.
props array	Array of Vev props Vev props documentation
editableCSS array	Define CSS properties that will be editable in the Deisgn Editor. Editable CSS documentation
component ReactNode	To render a custom component in the editing panel.
panelType string	The type of the editing panel. Can be inline. Default is not set (side panel).

Examples

Simple (JavaScript)

The only required field is the React component and the field name.

my-component.js

import React from "react";
import { registerVevComponent } from "@vev/react";

const MyComponent = () => {
  return <div>Hello, VeV</div>;
};

registerVevComponent(MyComponent, {
  name: "My awesome component",
});

export default MyComponent;

Advanced (TypeScript)

A more complex example listing a set of products.

my-component.tsx

import React from "react";
import { registerVevComponent, Image } from "@vev/react";
import styles from "./my-component.module.scss";

type Props = {
  title: string;
  image: {
    src: string;
    key: string;
  };
  products: {
    title: string;
    price: number;
    image: {
      src: string;
      key: string;
    };
  }[];
};

const MyComponent = ({ title, image, products = [] }: Props) => {
  return (
    <div className={styles.wrapper}>
      <h1>{title}</h1>
      <Image src={image} />
      {products.map((product, i) => (
        <div key={i}>
          <h2>{product.title}</h2>
          <h2>{product.price}</h2>
          <Image src={product.image} />
        </div>
      ))}
    </div>
  );
};

registerVevComponent(MyComponent, {
  name: "My awesome component",
  type: "section",
  props: [
    {
      name: "title",
      type: "string",
    },
    {
      name: "image",
      type: "image",
    },
    {
      name: "products",
      type: "array",
      of: [
        { name: "name", type: "string" },
        { name: "price", type: "number" },
        { name: "image", type: "image" },
      ],
    },
  ],
  editableCSS: [
    {
      selector: styles.wrapper,
      properties: ["background-color"],
    },
    {
      selector: styles.productBorder,
      properties: ["border-color"],
    },
  ],
});

export default MyComponent;