Comic Viewer Demo

Text watermark plugin sample

The afterFetch hook draws a text watermark onto each JPEG before the viewer renders it.

Source code

import * as ComicViewer from "@publira/comic-viewer";

const watermarkPlugin = ComicViewer.definePlugin({
  name: "text-watermark",
  afterFetch: ({ buffer }) => addWatermark(buffer),
});

export const Reader = ({ pages }) => (
  <ComicViewer.Root pages={pages} plugins={[watermarkPlugin]}>
    <ComicViewer.Viewport />
    <ComicViewer.Toolbar />
    <ComicViewer.PageNavigation />
  </ComicViewer.Root>
);