Swap out HTML component for another

[rmccue]

I’d like to be able to swap out certain components for others. As far as I can tell, matchers only let you do this inside the text content of nodes, not adjust the nodes themselves.

(Specifically, I want to match lists with a class and swap them out for an interactive React component instead, to enable GitHub-style task lists.)

[milesj]

Are you talking about HTMLElement nodes and not React nodes? They're pretty much destroyed/forgotten after the initial parse, as I build a new tree.

Do you have a pseudo example by chance?

[rmccue]

So, I expect to have original HTML source like:

<p>This is some text.</p>
<ul>
  <li>This is a list.</li>
</ul>
<ul class="Tasklist">
  <li>This is a task list.</li>
</ul>

My aim is to end up with a React tree like:

<Fragment>
  <p>This is some text</p>
  <p>This is some text.</p>
  <ul>
    <li>This is a list.</li>
  </ul>
  <Tasklist someProps={ { controlledBy: "me" } } />
</Fragment>

How that actually happens, I don't mind. Matchers seem like a natural way to do this, bar the fact they're operating on node content rather than the original HTML content. If I had [Tasklist] in the source instead, I could match that, so it seems like we should be able to do similar with actual HTML elements.

Ideally, I'd be able to have a matcher-style object which receives nodes instead of text. Once the initial parse is complete, I don't care about the nodes, only my React element.

[rmccue]

I think what I'm looking for is the equivalent of react-html-parser's transform. I'll take a look at adding something similar.