Using Marquee with React and TypeScript

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 <blink> 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^[1].

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 element.

To fix the issue, create a new types.d.ts file in your project, and paste in the following content:

1import * as React from 'react';
2
3declare global {
4  namespace JSX {
5    interface IntrinsicElements {
6      marquee: React.DetailedHTMLProps<
7        React.HTMLAttributes<HTMLElement>,
8        HTMLElement
9      >;
10    }
11  }
12}

1import * as React from 'react';
2
3declare global {
4  namespace JSX {
5    interface IntrinsicElements {
6      marquee: React.DetailedHTMLProps<
7        React.HTMLAttributes<HTMLElement>,
8        HTMLElement
9      >;
10    }
11  }
12}

Then in your tsconfig.json file, add the following:

1{
2  "compilerOptions": {
3    "types": ["./types.d.ts"]
4  }
5}

1{
2  "compilerOptions": {
3    "types": ["./types.d.ts"]
4  }
5}

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!