Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat: gatsby support

See original GitHub issue

Is there any way we could get support for frameworks such as Gatsby? Using this module worked locally, but when building pages for production, document was not found, assuming because of the way the DOM/HTML is built and not having document used by rough-notation

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:11 (7 by maintainers)

github_iconTop GitHub Comments

ncthbrtcommented, May 30, 2020

@eric-hc: I created my own bindings for gatsby in an internal project. Had to modify it a little, so could share, but my implementation looked something like this:

function AnnotatedSpan({ annotationConfig, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & { annotationConfig: RoughAnnotationConfig }) {
    const ref = useRef<HTMLSpanElement>(null);
    React.useLayoutEffect(() => {
        if (ref.current) {
            let annotation: RoughAnnotation | null = null;

                function annotateThis() {
                    annotation = annotate(ref.current!, { animate: false, ...(annotationConfig ?? {}) });
                if (ref.current) {
                    ref.current.addEventListener('onresize ', annotateThis);

            return () => {

        } else {
            return () => { };
    }, [ref.current, annotationConfig]);

    return <span ref={ref} {...props} style={{ ...( ?? {}), whiteSpace: 'nowrap' }} />;

This looks like what I did with this wrapper, did you do something to use annotationGroup? Is in my TODO list and I’m looking how to do it with a cool API or syntax

I didn’t need animation, but if I did, I would probably have take a look at the react context API.

My approach would be to create a wrapper around an annotation group context provider.

Can have the annotation component use the annotation context and add to the group if the context is non null.

linkstrifercommented, Jul 10, 2020

This will be supported in v0.1.1

Read more comments on GitHub >

github_iconTop Results From Across the Web

[feat]: add Gatsby Cloud functionality and "hot reloading" #15
Gatsby Cloud uses webhooks to synchronize content from the CMS with the running Gatsby application. Ghost already supports webhooks, so we're ...
Read more >
v2.30 Release Notes - Gatsby
AVIF support; Support remote image URLs (experimental). Notable bugfixes; Contributors. Welcome to gatsby@2.30.0 release (January 2021 #1).
Read more >
Most Important Themes in Great Gatsby, Analyzed
Have questions about the main Great Gatsby themes? We explain what they are, what they mean, and how to write an essay about...
Read more >
43 Famous The Great Gatsby Quotes About The American ...
Get the best The Great Gatsby quotes about the American Dream from this F. Scott Fitzgerald book about wealth and love in 1920s...
Read more >
The Great Gatsby: Themes - SparkNotes
On the surface, The Great Gatsby is a story of the thwarted love between a man and a woman. The main theme of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found