Customize Behavior
Velt Recorder Control Panel
1. Floating Mode vs. Thread Mode
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" />
2. onRecordedData callback
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>
)
}
Was this page helpful?