How to use rehype-react single

[YutaUra]

※ I'm not good at English. So please be kind ❤️
※ related: rehypejs/rehype-react#24

I'm creating Gatsby site. And I use gatsby-transformer-remark to transform raw markdown to markdown ast.

Then I can use rehype-react like this.

/* ~/util/markdown.ts */
import rehypeReact from "rehype-react"
import { createElement } from "react"

export const renderAst = new rehypeReact({
  createElement,
  components: {
    // custom component
    p: (props) => <SomeParagraph {...props} />,
  },
}).Compiler

/* ~/pages/index.tsx */
import { renderAst } from "~/util/markdown"

export default IndexPage = () => {
    const data = useStaticQuery(/* this is Gatsby feature to fetch data */)

    // markdownAst is transformed by remark
    const markdownAst = data.markdownRemark.htmlAst

    return (
        <div>{renderAst(markdownAst)}</div>
    )
}

This works completely except typescript errors.

'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.ts(7009)

Why don't you provide a way to use only rehype-react.

Or do you have any solutions?

[ChristianMurphy]

I'd recommend using it as a unified plugin, as shown in the type tests https://github.com/rehypejs/rehype-react/blob/main/types/rehype-react-test.tsx
For your specific case where you only need to stringify/compile to HTML, it would look something like:

const reactElement = unified.use(rehypeReact, {
  createElement,
  components: {
    // custom component
    p: (props) => <SomeParagraph {...props} />,
  },
}).stringify(htmlAst).result

[wooorm]

To add: that guide is extremely outdated (at best), and horrible wrong (at worst). I'd strongly suggest to forget what it says, and start afresh with what you want to accomplish, and we can help you get there

[YutaUra]

Oh, my!!

Make a few changes and it will work!!

import { createElement } from "react"
import rehypeReact from "rehype-react"
import unified from "unified"

const processor = unified().use(rehypeReact, {
  createElement,
  components: {
    p: (props) => <SomeParagraph {...props} />,
  },
})

export const renderAst = (ast: any): JSX.Element => {
  return (processor.stringify(ast) as unknown) as JSX.Element
}

I should use type assertion, but that's not much of a problem!

[YutaUra]

Thanks!

[ChristianMurphy]

Looks good, a couple refinements.
The any should be replaceable with unist.Node for some extra type safety.
And I think (though may be misremembering) that result is where the JSX element will appear, and should already be unknown typed. (edit strike that, I'm thinking of unified.process)

import { createElement } from "react"
import rehypeReact from "rehype-react"
import unified from "unified"
import type { Node } from "unist"

const processor = unified().use(rehypeReact, {
  createElement,
  components: {
    p: (props) => <SomeParagraph {...props} />,
  },
})

export const renderAst = (ast: Node): JSX.Element => {
  return (processor.stringify(ast) as unknown)  as JSX.Element
}