Velt Recorder Control Panel

The VeltRecorderControlPanel can be configured in either Floating mode or Thread mode.

Default: "floating"

Floating mode will show a preview in the bottom left of the page, no matter where you put the component.

Thread mode will show the component wherever it is placed.

To configure the mode, set the mode attribute to floating or thread:

<VeltRecorderControlPanel mode="floating" />
<VeltRecorderControlPanel mode="thread" />

You can use the useRecorderAddHandler() hook to add an event handler to the onRecordedData event.

import { useRecorderAddHandler} from '@veltdev/react';

export default function YourDocument() {

  const recorderAddEvent = useRecorderAddHandler();

  useEffect(() => {
    console.log('recorderAddEvent', recorderAddEvent);
  }, [recorderAddEvent]);

  return (
    <div>
       <VeltRecorderControlPanel mode="thread"/>
    </div>
  )
}