React Support

Integrate Vreo with React Context and Hooks.

Vreo supports usage patterns that pair React Context with Hooks. A simple example is shown below:

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

You can visit the Vreo React Demo to view the full source code.

Higher-Order Components

<VreoProvider>

Vreo provides the higher-order component <VreoProvider>, so that you do not need to create a Vreo instance via new VreoPlayer():

const FiveProvider = createFiveProvider()

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

Tip

Note that <VreoProvider> must be used together with <FiveProvider>.

Hooks

In addition to the higher-order components, a matching set of React Hooks is also provided.

useVreoAction

Retrieves the action functions built into Vreo.

const {
  load, // Load script data
  show, // Show the panel
  hide, // Hide the panel
  pause, // Pause
  play, // Play
  dispose, // Dispose (generally not triggered manually)
} = useVreoAction();

useVreoEventCallback

Adds a listener for asynchronous Vreo event callbacks.

useVreoEventCallback(VreoKeyframeEnum.PanoTag, callback);

useVreoPausedState

Retrieves the current playback state of Vreo.

const paused = useVreoPausedState();