ConstControls the visual appearance and animation of the recording indicator.
The formatDuration function can be customized to display time in
different formats.
const customStyles = {
...defaultRecordingIndicatorStyles,
borderRadius: 2, // More rounded corners
animationDuration: '1s', // Faster pulse
fontWeight: 700, // Bolder text
formatDuration: (seconds: number) => {
// Always show hours
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
},
};
<RecordingIndicator isRecording={true} styles={customStyles} />
Default styles for the RecordingIndicator component.