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 |
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;