Customize Behavior
Velt Recorder Control Panel
import { VeltRecorderControlPanel } from '@veltdev/react'
const SomeComponent = () => {
const onRecordedData = (id,tag) => {
console.log(id,tag)
}
return (
<div>
<VeltRecorderControlPanel mode="thread" onRecordedData={onRecordedData} />
</div>
)
}
export default SomeComponent;
React / Next.js
HTML
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
Whenever a recording is created, the VeltRecorderControlPanel
component emits a callback event called onRecordedData
with data from the VeltRecorderPlayer
that was used to create the recording.
This is the response object that you get back:
Field | Type | Example |
---|---|---|
id | string | “recorder_id” |
tag | string | <snippyly-recorder-player recorder-id=\"RECORDER_ID\"></snippyly-recorder-player> |
import { VeltRecorderControlPanel } from '@veltdev/react'
const SomeComponent = () => {
const onRecordedData = (id,tag) => {
console.log(id,tag)
}
return (
//... rest of the component code...
<VeltRecorderControlPanel mode="thread" onRecordedData={onRecordedData} />
//... rest of the component code...
)
}
export default SomeComponent;
Was this page helpful?
import { VeltRecorderControlPanel } from '@veltdev/react'
const SomeComponent = () => {
const onRecordedData = (id,tag) => {
console.log(id,tag)
}
return (
<div>
<VeltRecorderControlPanel mode="thread" onRecordedData={onRecordedData} />
</div>
)
}
export default SomeComponent;