How to substitute parsed HTML elements with React components (e.g. Material UI)

[sebpowell]

I am working on a project that uses Material UI, and I would like to find a way to use these when parsing an HTML string.

For example, given the following string: <p>Test</p>, I would like to be able to output something like this:

<Box component="p" sx={{color: "red"}}>Test</Box>

Looking at the docs, I figured replace might do the trick – something like this:

parse('<p>test</p>', {
  replace(domNode) {
    if (domNode === "p") {
      return <Box component="p" sx={{color: "red"}}>Test</Box>
    }
  },
});

However 'domNode' and it's various attributes don't tell you what sort of element is being parsed. So, unless I am missing something, using replace isn't going to work.

What would be the best way to achieve this? Any suggestions greatly appreciated, thank you in advance.

[remarkablemark]

You're on the right track with replace. Can you add a console.log() to inspect the object of domNode?

parse('<p>test</p>', {
  replace(domNode) {
    console.log(domeNode);
  },
});

If you check domNode.name, the logic should work:

 parse('<p>test</p>', {
   replace(domNode) {
-    if (domNode === "p") {
+    if (domNode.name === "p") {
       return <Box component="p" sx={{color: "red"}}>Test</Box>
     }
   },
 });

See Stackblitz demo.

[sebpowell]

@remarkablemark thank you so much for the quick reply – domNode.name does seem to work, although Typescript doesn't seem to 'like it' ('name' Property 'name' does not exist on type 'DOMNode'), and then I'm not sure how to access the node content – I tried doing:

 parse('<p>test</p>', {
   replace(domNode) {
     if (domNode.name === "p") {
       return <Box component="p" sx={{color: "red"}}>{domNode.children}</Box>
     }
   },
 });

But that didn't seem to work, any ideas?

[remarkablemark]

Take a look at the README for how to use this library with TypeScript:

import { HTMLReactParserOptions, Element } from 'html-react-parser';

const options: HTMLReactParserOptions = {
  replace(domNode) {
    if (domNode instanceof Element && domNode.name) {
      // ...
    }
  },
};

See also StackBlitz demo.

[sebpowell]

@remarkablemark thank you! I actually did try that, but just realised the reason it wasn't working is because it was using the built in type for Element, rather than importing it from html-react-parser (in case this helps anyone else).

That seems to have done the trick. The only part I'm still struggling with is how you render the children – from what I can see in the README, you are supposed to use domToReact (which seems to work perfectly), however this is throwing another TS error. The example on README seems to suggest you need to first check for the presence of attribs, but that doesn't seem to exist on the type either – here's a screenshot of my current setup, with the errors:

import parse from 'html-react-parser'
import { Element, domToReact, DOMNode } from 'html-react-parser'

const HTML = ({ content = '' }: { content: string }) => {
  return parse(content, {
    replace(domNode: DOMNode) {
      console.log(domNode)

      if (!domNode.attribs) {
        return
      }

      if (domNode instanceof Element && domNode.name === 'p') {
        return <p className="test">{domToReact(domNode.children, {})}</p>
      }
    },
  })
}

[remarkablemark]

You'll need to use type assertion:

domToReact(domNode.children as DOMNode[])

See README.

[sebpowell]

@remarkablemark – perfect, thank you! I cast to any, but this is better. Thank you so much for all your help (and for the library), closing this.