Using glitch-writer in React

[jesse-stewart]

I really love this library and I would like to integrate it into my React project.
Has anyone has success using this library in react? I have tried multiple methods and I haven't had any success. Perhaps someone with more experience has done this already. Thanks everyone.

[thetarnav]

Heyyy
Glad to hear that you like this old project of mine :)
Could you share your attempts? I've never used react but I'm guessing it won't be too hard. From what I remember you only need a reference to the element to get it working, but controlling the displayed text with props.children "reactively" might be more tricky. Not sure.

[jesse-stewart]

After creating a code sandbox and testing with React, I'm realizing this must be something very specific to my application and the use of client side and server side components in NextJS/Hydrogen. I created a code sandbox for NextJs for testing. I'm positive this is out of scope for this package but it is worth a try.

https://codesandbox.io/s/jolly-black-imzepo?file=/package.json

The first error I always get is:
document is not defined ReferenceError: document is not defined at new GlitchedWriter

[thetarnav]

Ah, SSR would do it. GlitchWriter class will probably try to access DOM APIs as it's instantiated.
I would imagine this is a client-only library, so it has to we wrapped with some if (typeof window !== "undefined") check while doing SSR.

[jesse-stewart]

To Answer my own question:

GlitchedWriter works great with React

https://codesandbox.io/s/restless-fire-t4v8qg?file=/src/App.js