Unable to get typescript typings to work for custom html elements

[vritant24]

I may be overlooking something, but I'm stuck so would appreciate any help :)

I'm trying to use rehypeReact to use a react component CustomComponent for a custom html tag custom-element like so:

return unified()
            .use(remarkParse)
            .use(remarkGfm)
            .use(remarkRehype)
            .use(rehypeRaw)
            .use(rehypeReact, {
                createElement: createElement,
                Fragment,
                components: {
                    "custom-element": CustomComponent
                },
            });

const CustomComponent: React.FC = () => {
    return <div/>;
};

Typescript isn't happy with this as components are defined to only take in JSX.intrinsic types:

  components?: Partial<{
    [TagName in keyof JSX.IntrinsicElements]:
      | keyof JSX.IntrinsicElements
      | ComponentType<JSX.IntrinsicElements[TagName]>
  }>

and so I get an error when I try to do so:

Argument of type '[{ createElement: { (type: "input", props?: (InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement>) | null | undefined, ...children: ReactNode[]): DetailedReactHTMLElement<...>; <P extends HTMLAttributes<...>, T extends HTMLElement>(type: keyof ReactHTML, props?: (ClassAttributes<...> & P) | ... ...' is not assignable to parameter of type '[boolean] | [Options]'.
  Type '[{ createElement: { (type: "input", props?: (InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement>) | null | undefined, ...children: ReactNode[]): DetailedReactHTMLElement<...>; <P extends HTMLAttributes<...>, T extends HTMLElement>(type: keyof ReactHTML, props?: (ClassAttributes<...> & P) | ... ...' is not assignable to type '[boolean]'.
    Type '{ createElement: { (type: "input", props?: (InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement>) | null | undefined, ...children: ReactNode[]): DetailedReactHTMLElement<...>; <P extends HTMLAttributes<...>, T extends HTMLElement>(type: keyof ReactHTML, props?: (ClassAttributes<...> & P) | ... 1...' is not assignable to type 'boolean'

Is there an option I'm missing, or is what I want to do not possible?

[ChristianMurphy]

Welcome @vritant24! 👋
The React/JSX types allow adding additional elements to JSX.IntrinsicElements
This can look like:

declare global {
    namespace JSX {
        // this merges with the existing intrinsic elements, adding 'my-custom-tag' and its props
        interface IntrinsicElements {
            'my-custom-tag': {'my-custom-attribute': string}
        }
    }
}

source: related discussion over in react-markdown which uses similar typings remarkjs/react-markdown#622 (comment)

[vritant24]

Thanks for the welcome and the quick answer, that does fixes my issue :)