React API

import { GlyphOverlay, useAsyncSource, useDomSource, useHighlighter } from "glyphline/react";

<GlyphOverlay>Copy Anchor Link

Renders the <svg> overlay. Put it inside a positioned element that wraps the text.

useHighlighter(source, state, options?)Copy Anchor Link

The hook behind GlyphOverlay. Returns a ref callback for your own <svg>:

const ref = useHighlighter(source, { sentence, word }, { animate: true });
return <svg ref={ref} className="gl-overlay my-overlay" preserveAspectRatio="none" />;

useDomSource<E>(options?)Copy Anchor Link

[ref, source] for an element's HTML text. Rebuilt when the text changes (at most once per frame). options are those of domSource, read when the element mounts.

useAsyncSource(make, deps)Copy Anchor Link

Runs make when deps change and returns its result once it resolves, dropping results that arrive after a newer call. Return null from make for "nothing yet". Meant for pdfSource:

const source = useAsyncSource(() => page && pdfSource(page, { OPS }), [page]);

Everything else (sources, wordAtPoint, shapes, motion) comes from the core: see API.