Custom Elements in react-remark

[WilsontheWolf]

Hello There. I'm trying to allow my MD to have custom HTML tags which I have react components for. I currently am calling my code like this

                    <MD
                        remarkToRehypeOptions={{ allowDangerousHtml: true }}
                        rehypePlugins={[rehypeRaw, rehypeSanitize]}
                        rehypeReactOptions={{
                            components: {
                                // eslint-disable-next-line jsx-a11y/anchor-has-content
                                a: props => <a className="text-blue-500 hover:text-blue-400 focus:text-blue-400 focus:outline-none" {...props} />,
                                Button: props => <Button {...props} />
                            },
                        }}
                    >{this.state.value}</MD>

My markdown is this

## Hello there!
This is a test page.

<Button>Click Me!</Button>

I want the Button tag in my MD to render to my button class in React. Is there a way to do this?

[ChristianMurphy]

I want the Button tag in my MD to render to my button class in React. Is there a way to do this?

Depends on the exact behavior you want.
HTML will map both <button> and <Button> (and all other upper and lowercase combinations) to button, and if that's what you're looking for rehypeReactOptions should work fine.
If you want to differentiate between <button> and <Button>, then you want JSX in markdown instead of HTML in markdown, which is where MDX (also built on remark) could help https://mdxjs.com/advanced/runtime

[rjantoine]

I have just created a plugin to solve this issue. It uses the remark-directive pattern so that :Button[Click Me!] turns into <Button value="Click Me!" />. No need to add a renderer, just include the component in the plugin options. https://github.com/rjantoine/react-markdown-remark-directive

[piscopancer]

unfortunately, your package does not have type definitions, you better off updated it for typescript usage