How to parse custom components?

[denisidoro]

I expected this test to pass:

const ReactDOMServer = require('react-dom/server')
const HtmlToReactParser = require('html-to-react').Parser

const foo = () => "lorem"

const htmlInput = '<div><h1>Title</h1><foo/><p>A paragraph</p></div>'
const expected = '<div><h1>Title</h1>lorem<p>A paragraph</p></div>'

const htmlToReactParser = new HtmlToReactParser()
const reactElement = htmlToReactParser.parse(htmlInput)
const reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement)

assert.notEqual(reactHtml, htmlInput)
assert.equal(reactHtml, expected)

However, reactHtml is equal to htmlInput in this case.

How to use custom options to achieve this without manually handling each node type?

[gkpo]

Same question here! I'd like to be able to parse Next.js Link components

[denisidoro]

For reference, I ended up doing this: https://github.com/denisidoro/remacro/blob/master/core/src/renderer.js

[yadavravi2801]

Use Multiple Custom components

https://gist.github.com/yadavravi2801/001ac6a157b7018bf501f6fec41d8867