Using Marquee with React and TypeScriptPublished See discussion on Twitter
I really enjoy using the
<marquee> HTML element, the fact that it still works
in browsers today even thought its been deprecated (and its sibling
has been removed) makes it all the better.
Its always so cool seeing a webpage show up after some work configuring tools, or bootstrapping a new app and having the "hello world" message scroll by automatically because of the marquee element.
Unfortunately, TypeScript and React's types have really leaned into the whole "deprecated" thing, so you get these red underlines and also sometimes build fails.
Fortunately, there's a fix to resolve this pain, unfortunately it's a bit archaic so I figured I'd put up this blog post to make it easier to find in the future!
The gist is that you override
JSX.IntrinsicElements to add the marquee
To fix the issue, create a new
types.d.ts file in your project, and paste in
the following content:
Then in your
tsconfig.json file, add the following:
Then you may need to restart your editor, but it should resolve the missing types for the marquee element!
The beauty of this is that you can do the same for any element you may want to use!