Skip to main content

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/typeDescription
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, action 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).
children
object

name: string, icon: string;
To render Vev content as children.
Children documenation

interactions
array
Array of Vev events
Interactions documentation
events
array
Array of Vev events
Events documentation

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;