Interactions and Events

Interaction and events facilitate dynamic communication among components, central to an event-driven architecture. This approach empowers components not only to respond to external events but also to broadcast their own, enabling other components to react accordingly. This provides you the capability to design intricate components that are both interactive and responsive to interactions from others.

Vev Event

The events itself is identical for interactions and events. These events can be defined under interactions and events in the registerVevComponent function as an array of VevEvent.

Name/type	Description
name string	Name for the event
description string	Description for the event
args JSON	Array of Vev props Vev props documentation

This events are dispatched as custom events under the @@vev namespace.

Interactions

Interactions is something your component can do, for example an element can be hidden. But it is also possible for elements to have custom actions, like a video player can play or pause.

To use interaction in your code, you have to add interactions to registerVevComponent and then use the useVevEvent hook in your code.

Events

Events are things that happens, like a button is clicked (On click) or a page is scrolled (On scroll). But elements can also dispatch their custom events, for example a video player can dispatch a On play event.

To use events in your code, you have to add events to registerVevComponent and then use the useDispatchVevEvent hook to dispatch them.

Example

An example for this is the YouTube component, as demonstrated in this Vev project. This component includes the following interactions and events that can be leveraged by the design editor.

Interactions

• Play
• Pause
• Toogle play
• Restart
• Mute
• Unmute
• Toggle sound

Events

• On play
• On pause
• On end
• On play time

Code

enum YoutubeInteraction {
  play = 'play',
  pause = 'pause',
}

enum YoutubeEvent {
  onPlay = 'onPlay',
  onPause = 'onPause',
}

const YouTube = ({ videoId }) => {
  const ref = useRef<HTMLIFrameElement>(null);
  const dispatch = useDispatchVevEvent();
  let src = 'https://www.youtube.com/embed/' + videoId;

  // Listen to events from Vev adn dispatch to YouTube
  useVevEvent(YoutubeInteraction.play, () => playerRef.current?.playVideo());
  useVevEvent(YoutubeInteraction.pause, () => playerRef.current?.pauseVideo());

  useEffect(() => {
    playerRef.current = new YT.Player(ref.current, {
      events: {
        onStateChange: onPlayerStateChange,
      },
    });

    // Listen to events from YouTube and dispatch to Vev
    function onPlayerStateChange(event) {
      switch (event.data) {
        case YT.PlayerState.PLAYING:
          dispatch(YoutubeEvent.onPlay);
          break;
        case YT.PlayerState.PAUSED:
          dispatch(YoutubeEvent.onPause);
          break;
      }
    }
  }, [])


  return (
    <div className={styles.wrapper}>
      <iframe
        ref={ref}
        src={src}
        frameBorder="0"
      />
    </div>
  );
}

registerVevComponent(Youtube, {
  name: "YouTube",
  // ...,
  events: [
    {
      type: YoutubeEvent.onPlay,
      description: "On play",
    },
    {
      type: YoutubeEvent.onPause,
      description: "On pause",
    },
  ],

  interactions: [
    {
      type: YoutubeInteraction.play,
      description: "Play",
    },
    {
      type: YoutubeInteraction.pause,
      description: "Pause",
    },
  ],
});

This is a non-working simplified version of the code, find full code on GitHub

Example of the YouTube component in the Vev Design editor