How to keep a specific element from being transformed by React?

[tarikjn]

Question

In the example bellow I have a ugly hack to reconstitute a specific element to text after it has been parsed by React through html-react-parser:

  options = {
    replace: ({ name, attribs, children, ...rest }) => {
      if (name === 'a' && attribs.href && !attribs.target) {
        return <Link to={attribs.href}>{domToReact(children)}</Link>
      }
      if (name === 'video') {
        return <div dangerouslySetInnerHTML={{ __html: `
          <video autoplay loop muted playsinline>
            <source src="${children[1].attribs.src}" type="video/mp4" />
          </video>
        `}}/>
      }
    }
  }

This is due to facebook/react#6544, facebook/react#10389

Is there a better way to do this, and hopefully access original html, or better yet skip some element from being passed to the library? I could not find an example on the doc or attributes on the replace arguments to help with doing this. innerHTML for example is not accessible on the children elements.

[remarkablemark]

@tarikjn can you do something like this? https://stackoverflow.com/a/66153842

The approach is the same as facebook/react#10389 (comment)

[remarkablemark]

Closing issue due to inactivity