Add types for custom tags on component prop

[errnesto]

Subject of the issue

I think it is not possible to add components / renderers for custom tags like myCustomTag
with typescript.

Problem

Lets say I'm using a plugin that creates custom tags e.g. myCustomTag and I want to render a custom component for it:

const components = { myCustomTag: ({node, ...props}) => <MyCustomComponent {...props} /> }

<ReactMarkdown
  remarkPlugins={[myPlugin]}
  components={components}
/>

Then I get a type error that myCustomTag is not allowed. This works fine if I set components to any.

Expected behavior

I should be able to add component renderers for custom tags without typescript complaining.
It would be super cool if I could define custom tags with their respected properties…

[ChristianMurphy]

The types expect valid HTML, with TS 4.4 I could see custom elements like my-custom-tag being added with index signatures https://devblogs.microsoft.com/typescript/announcing-typescript-4-4-beta/#symbol-template-signatures.
Something like

export interface CustomElements {
  [name: `${string}-${string}`]: NormalComponent
}

I'm not sure I see myCustomTag as being a part of react-markdown, it isn't valid markdown/HTML.
If you're looking to mix JSX in markdown MDX/XDM may be a better fit https://github.com/wooorm/xdm

[ChristianMurphy]

Another approach, which I believe works today, would be to extend the IntrinsicElements type provided by the React types.

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}
        }
    }
}

thoughts @wooorm on preferred approach?
I'm learning towards extending IntrinsicElements similar to the pattern for extending AST nodes.

[ChristianMurphy]

this also relates to #623 (review)

[wooorm]

thoughts @wooorm on preferred approach?

I’d suggest to type JSX.IntrinsicElements.

I’d also want to hear more about what @errnesto is doing to get a custom component.

[ChristianMurphy]

@errnesto friendly ping, any insights on:

I’d also want to hear more about what @errnesto is doing to get a custom component.

?

[errnesto]

OH yeah sorry for the late reply :-)

We wanted to add something like https://github.com/elviswolcott/remark-admonitions to our markdown but have more controll over the generated html.

So we use https://github.com/remarkjs/remark-directive and add a simple 'plugin'.

The markdown looks e.g. like this:

:::note
Ab est nihil vero non sequi sapiente. Omnis doloremque temporibus
:::

This is the 'plugin'

  function customNotesPlugin() {
    return function transformer(tree: Node) {
      const visitor: Visitor<
        Node & { attributes: Record<string, string>; name: string }
      > = (node) => {
        if (node.name !== 'note') return
        const data = node.data || (node.data = {})
        data.hName = 'note'
        data.hProperties = { title: node.attributes.title ?? 'Note' }
      }
      visit(tree, ['containerDirective'], visitor)
    }
  }

And then this the ReactMakrdown instance:

<ReactMarkdown
  remarkPlugins={[
    remarkDirective,
    customNotesPlugin,
  ]}
  components={{
    note: ({ title, children }) => {
      return (
        <Note title={title as string}>{children}</Note>
      )
    },
  }}
  {...props}
/>

---

For me simply extending IntrinsicElements does solve the issue :-)
(maybe this should be documented though?)

I could do what remark-math does and just return a div or span and then inspect this via a rehype plugin or add a function to render a div and check for a note className or prop…
But this feels a bit messy to mee…

Also the docs say:

The keys in components are HTML equivalents for the things you write with markdown (such as h1 for # heading)†

† Normally, in markdown, those are: a, blockquote, code, em, h1, h2, h3, h4, h5, h6, hr, img, li, ol, p, pre, strong, and ul. With remark-gfm, you can also use: del, input, table, tbody, td, th, thead, and tr. Other remark or rehype plugins that add support for new constructs will also work with react-markdown.

[ChristianMurphy]

So we use https://github.com/remarkjs/remark-directive and add a simple 'plugin'.

Thanks for sharing!

For me simply extending IntrinsicElements does solve the issue
(maybe this should be documented though?)

A PR improving documentation would be welcome!

could do what remark-math does and just return a div or span and then inspect this via a rehype plugin or add a function to render a div and check for a note className or prop…
But this feels a bit messy to me

Up to you on the preferred way to render HTML, custom elements are also supported

Also the docs say:

The keys in components are HTML equivalents for the things you write with markdown

HTML supports custom elements (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), but they come with specific naming restrictions

Note that custom element names require a dash to be used in them (kebab-case); they can't be single words.

<my-note></my-note> and <custom-note></custom-note> are valid HTML, <note></note> is not valid HTML.
If <note> were to fall through, with no custom renderer provided, React would throw a warning https://codesandbox.io/s/mystifying-jepsen-v04qk?file=/src/App.js