Detect when the user interacts with your widget in editor mode.

For better widget usability, consider changing the state of your widget depending on which mode the user is in. For example, play a video when in preview mode, but stop it when in editor mode. Or, if the user is changing the background color of a hidden dropdown in your widget, reveal that dropdown when its background colour property is being changed.

useEditorState() returns the following:

disabled: boolean - true when in editor mode, false when in preview mode.
rule: string - tells which CSS rule the user is editing. Sets to ‘host’ when no rule is being edited .
selected: boolean - true when the widget is selected in editor mode.

Example

import { useEditorState } from 'vev';
import { useState, useEffect, useRef } from 'react';

export default function ({ url }: Props) {
  const {disabled} = useEditorState();
  const videoReference = useRef<HTMLVideoElement>(null);
  
  // this function runs on every value change of 'disabled'
  useEffect(() => {
    //If disabled pause video
    if (disabled) {
      videoReference.current.pause();
    } else {
      videoReference.current.play();
    }
  }, disabled);
  
  return <video className="video fill" src={url} ref={videoReference} />
}