Skip to main content

Components

Image​

The Image component can be used with the type: image schema field.

Example​

import React from 'react';
import { registerVevComponent, Image } from '@vev/react';

const MyComponent = (props) =>
  <Image src={props.image} />;

registerVevComponent(MyComponent, {
  name: "My component",
  props: [{
    name: "image",
    type: "image",
  }]
})

export default MyComponent;

Interface​

type Props = {
  className?: string;
  sizes?: [number, number][];
  src?: string | { key: string };
  style?: { [attr: string]: number | string };
}

The Link component can be used together with the type: link schema field.

Example​

import React from 'react';
import { registerVevComponent, Link } from '@vev/react';

const MyComponent = (props) =>
  <Link to={props.link} />;

registerVevComponent(MyComponent, {
  name: 'My component',
  props: [{
    name: 'link',
    type: 'link',
  }],
});

export default MyComponent;

Interface​

type Props = {
  /**
   * Preset for what linkType the field should be.
   * 0: Page, 1: Element, 2: External link, 3: Email, 4: Phone.
   */
  mode: 0 | 2 | 3 | 4;
  href?: string;
  page?: string;
  target?: boolean;
  phone?: string;
  email?: string;
}

Render​

The Render component is used to render a Vev project in your React application.

The component supports server side rendering using Suspense, which means it will deliver static HTML on the server (if the app is built for server side rendering using Suspense) and hydrate on the client. This is also compatible with NextJS if you are using the app routing feature.

caution

To use this component with NextJS you have to opt-in to the app directory routing.

This component will also work in a traditional React application, but the component will only render client side.

Example​

import React from 'react';
import { Render as VevRender } from '@vev/react';

const MyComponent = (props) => {
  return (
    <VevRender projectKey="my-project-key" pageKey="my-page-key" />
  );
};

export default MyComponent;
info

To find the projectKey and pageKey look at your Vev Editor URL:

https://editor.vev.design/edit/[projectKey]/[pageKey]

Interface​

type Props = {
  projectKey: string;
  pageKey: string;
  noCache: boolean;
  fallback: React.ReactNode; // Render a fallback component when loading
}