Options
Every field of CommentOverlayOptions, grouped by what it governs.
Every option is optional. createCommentOverlay() with no argument at all
mounts a working widget.
import type { CommentOverlayOptions } from 'helldots';Identity
Prop
Type
Persistence
Prop
Type
See persistence.
Captures
Prop
Type
See captures.
Navigation & links
Prop
Type
See deep links and frameworks.
Interface
Prop
Type
Lifecycle callbacks
Prop
Type
Change callbacks
One stream, or ten specific handlers carrying the same events at the same moments. Subscribe either way, or both.
Prop
Type
The ten specific ones are documented in full on
events: onCommentCreated, onCommentEdited,
onCommentDeleted, onCommentStatusChanged, onCommentUpdated,
onAnchorLost, onReplyAdded, onReplyEdited, onReplyDeleted and
onReactionToggled.
A fully wired example
import { createCommentOverlay, type CommentOverlayOptions } from 'helldots';
const options: CommentOverlayOptions = {
user: { name: session.name, id: session.userId },
can: (action, target) => session.isAdmin || target.authorId === session.userId,
locale: navigator.language,
fastCapture: true,
captureTimeout: 8000,
navigate: (page) => router.push(page),
autoDetectNavigation: true,
transformScreenshot: async (dataUrl, { kind, commentId }) => {
const blob = await (await fetch(dataUrl)).blob();
const { url } = await api.upload(blob, { kind, commentId });
return url;
},
onChange: (event) => {
if (event.origin === 'host') return;
api.post('/helldots-events', event);
},
onError: (error, context) => logger.warn({ context }, String(error)),
onReady: async (overlay) => overlay.loadComments(await api.get('/comments')),
};
const overlay = createCommentOverlay(options);