React Support

Vreo supports React Context Use patterns that match Hooks . Simple sample below：

const FiveProvider = createFiveProvider();
const App: React.FC = () => {
  return (
    <FiveProvider initialWork={work}>
      <FiveCanvas width={width} height={height} />
      <VreoProvider>
        {/* React rendered other modules */}
        <YourAppComponent />
      </VreoProvider>
    </FiveProvider>
  );
};

You can access Vreo React Demo for detailed source code.

High Level Component

<VreoProvider>

Vreo provides high-stage components<VreoProvider>, you don't need to create new VreoPlayer() create Vreo instance：

const FiveProvider = createFiveProvider()

<FiveProvider initialWork={work}>
  <FiveCanvas width={width} height={height} />
  <VreoProvider>
    {/* Other modules rendered by React*/}
    <YourAppComponent />
  </VreoProvider>
</FiveProvider>

prompt

requires attention to <VreoProvider> must be specified with <FiveProvider> used together.

Hooks Functions

In addition to high-stage components, a companion React Hooks function is provided.

useVreoAction

Get the built-in execution function for Vreo.

const {
  load, // load playbook data
  show, // show panel
  hide, // hides panel
  pause, // Pause
  play, // Play
  dispose, // Destroy (usually not triggered manually)
} = useVreoAction();

useVreoEventCallback

Add Vreo asynchronous event callback

useVreoEventCallback(VreoKeyframeEnum.PanoTag, callback);

useVreo PausedState

Get Vreo current playback status.

const paused = useVreoPausedState();